twoslash-cli - npm Package Compare versions

Comparing version 1.2.15 to 1.3.0

bin/twoslash.js

@@ -27,2 +27,3 @@ #!/usr/bin/env node
   .option("--sourceAlso", "Also include a render of the source input. Only works on ts/tsx/js/jsx files.")
+  .option("--reactAlso", "Also include a tsx file with the code embedded.")
   .option("--lint", "Don't actually render output files, just verify they work.")
@@ -71,2 +72,3 @@
     lint: options.lint,
+    reactAlso: options.reactAlso
   })
@@ -73,0 +75,0 @@ }

index.js

 // @ts-check
 
+// To work on this, cd to this folder:
+// cd packages/twoslash-cli
+
+// Then run:
+// ./bin/twoslash.js examples/*.ts render
+
 import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync } from "fs"
@@ -26,3 +32,3 @@ import remark from "remark"
 
-/** @typedef {{ from: string, to: string, splitOutCodeSamples: boolean, alsoRenderSource: boolean, lint: boolean, realFrom?: string }} Args */
+/** @typedef {{ from: string, to: string, splitOutCodeSamples: boolean, alsoRenderSource: boolean, lint: boolean, realFrom?: string, reactAlso?: boolean }} Args */
 /** @param {Args} args */
@@ -113,2 +119,17 @@
     console.log(`  - ${realFrom || from} -> ${writePath} `)
+
+    // Also allow rendering the output into a TSX components
+    if (args.reactAlso) {
+      const twoslash = hAST.children.find(node => node.type === "raw" && node.value.includes('class="shiki'))
+      if (!twoslash) throw new Error(`Could not find a twoslash code sample in '${from}' for the TSX component`)
+
+      const prefix = `// Auto-generated by the twoslash-cli from ${basename(from)}`
+      const code = toTSX(prefix, twoslash.value)
+
+      const writePath = lastIsHTML ? to : join(to, basename(from).replace(".tsx", "").replace(".ts", "").replace(".md", ".tsx"))
+      writeFileSync(writePath, code)
+
+      console.log(`    ${" ".repeat((realFrom || from).length)} +  ${writePath} \n`)
+    }
+
   } else {
@@ -148,2 +169,13 @@ if (!existsSync(to)) mkdirSync(to, { recursive: true })
 \`\`\`
-`
+`
+
+
+const toTSX = (prefix, content)  => `${prefix}
+import React from "react"
+
+const innerHTML = \`
+${content}
+\`
+
+export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
+`

package.json

 {
   "name": "twoslash-cli",
-  "version": "1.2.15",
+  "version": "1.3.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "bin": {

README.md

@@ -47,3 +47,3 @@ ## Shiki Twoslash CLI
 
-> Lint all the code samples in bunch of Markdown files .
+> Lint all the code samples in bunch of Markdown files.
 
@@ -54,3 +54,8 @@ ```sh
 
+> Create TSX files with a named `Code` export for a set of .ts files.
 
+```sh
+twoslash --sourceAlso samples/*.ts components/twoslash 
+```
+
 #### Configuring Shiki Twoslash
@@ -57,0 +62,0 @@

No alert changes

Improved metrics

Total package byte prevSize

21997

116.42%

Number of package files

11

120%

Lines of code

237

33.15%

Number of lines in readme file

90

5.88%

No dependency changes