patch: inject prefix into copy/fork source code

Author: pelikhan

cli/src/build.ts

@@ -152,7 +152,7 @@ async function buildOnce(file: string, options: BuildOptions & CmdOptions) {
         throw new CompilationError("compilation failed")
     }
 
-    log(`binary: ${prettySize(binary.length)}`)
+    log(`bytecode: ${prettySize(binary.length)}`)
     if (stats) {
         const { sizes, functions } = dbg
         log(

cli/src/devtools.ts

@@ -70,7 +70,7 @@ export async function devtools(options: DevToolsOptions & CmdOptions) {
         ? () => {
               const bytecode = readFileSync(bytecodeFile)
               const dbg = debugFile ? readJSONSync(debugFile) : undefined
-              debug(`refresh bytecode ${prettySize(bytecode.length)}...`)
+              debug(`refresh bytecode (${prettySize(bytecode.length)}) with ${clients.length} clients...`)
               const msg = JSON.stringify({
                   type: "bytecode",
                   channel: "devicescript",

website/language.config.js

@@ -11,6 +11,7 @@ async function createConfig() {
                 label: "ts", // label for the language in markdown code blocks
                 highlight: "typescript", // syntax highlighting provided by prism for the language
                 showLineNumbers: false, // whether to show line numbers in all code block of this language
+                prefix: 'import * as ds from "@devicescript/core"',
                 buildConfig: {
                     version: "1",
                     langVersion,

website/src/components/TutorialComponents/CodeBlock.tsx

@@ -26,17 +26,15 @@ function CodeEditor(props: {
     theme: PrismTheme
     showLineNumbers: boolean
     readonly: boolean
+    prefix?: string
     sandbox?: {
         files: Record<string, { content: string }>
         main?: string
     }
 }) {
-    const { code, language, sandbox } = props
-    // const [disabled, setDisabled] = useState(props.disabled);
-    const [allowUndo, setAllowUndo] = useState(false)
-    const [tmpCode, setTmpCode] = useState("")
-    const [hasFocus, setHasFocus] = useState(false)
-
+    const { code, sandbox, prefix } = props
+    const prefixedCode =
+        !prefix || code.indexOf(prefix) > -1 ? code : prefix + "\n\n" + code
     useEffect(() => {
         if (props.onChange) {
             props.onChange(code)
@@ -52,11 +50,6 @@ function CodeEditor(props: {
             range.collapse(true)
             selectObj.addRange(range)
         }
-        setHasFocus(true)
-    }
-
-    const handleBlur = () => {
-        setHasFocus(false)
     }
 
     return (
@@ -111,7 +104,6 @@ function CodeEditor(props: {
                             }}
                             spellCheck="false"
                             onFocus={handleFocus}
-                            onBlur={handleBlur}
                         >
                             <code
                                 className={clsx(
@@ -148,14 +140,14 @@ function CodeEditor(props: {
             <div className={codeBlockContentStyles.buttonGroup}>
                 <CopyButton
                     className={codeBlockContentStyles.codeButton}
-                    code={code}
+                    code={prefixedCode}
                 />
                 {sandbox && (
                     <CodeSandboxButton
                         className={codeBlockContentStyles.codeButton}
                         files={{
                             ...sandbox.files,
-                            [sandbox.main]: { content: code },
+                            [sandbox.main]: { content: prefixedCode },
                         }}
                         startFile={sandbox.main}
                     />

website/src/components/TutorialComponents/CodeSandboxButton.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import clsx from "clsx"
-import codeBlockContentStyles from "@docusaurus/theme-classic/src/theme/CodeBlock/Content/styles.module.css"
 
 export default function CodeSandboxButton(props: {
     className?: string

website/src/components/TutorialComponents/index.tsx

@@ -23,6 +23,7 @@ interface CodeBlockProps {
     readonly: boolean
     langVersion?: string
     tool?: string
+    prefix?: string
     sandbox?: {
         files: Record<string, { content: string }>
         main?: string
@@ -91,6 +92,7 @@ function CustomCodeEditor(props: {
     onChange?: (code: string) => void
     githubRepo: string | undefined
     readonly: boolean
+    prefix?: string
     sandbox?: {
         files: Record<string, { content: string }>
         main?: string
@@ -105,6 +107,7 @@ function CustomCodeEditor(props: {
         onChange,
         readonly,
         sandbox,
+        prefix,
     } = props
     const prismTheme = usePrismTheme()
     // console.log(prismTheme);
@@ -134,6 +137,7 @@ function CustomCodeEditor(props: {
                 readonly={readonly}
                 showLineNumbers={showLineNumbers}
                 sandbox={sandbox}
+                prefix={prefix}
             />
         </Container>
     )
@@ -154,6 +158,7 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
         showLineNumbers,
         readonly,
         sandbox,
+        prefix,
     } = input
     const [currCode, setCurrCode] = useState(code)
     const [outputRendered, setOutputRendered] = useState(false)
@@ -236,6 +241,7 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
                 githubRepo={githubRepo}
                 readonly={readonly}
                 sandbox={sandbox}
+                prefix={prefix}
             />
             <>
                 <div className={styles.buttons}>

website/src/remark/render-code-blocks.mjs

@@ -226,6 +226,8 @@ export default function plugin() {
                     readonly: langConfig.readonly ?? true,
                     showLineNumbers: showLineNumbers,
                     sandbox: langConfig.sandbox,
+                    prefix: langConfig.prefix,
+                    label,
                 })
                 parent.children.splice(index, 1, {
                     type: "jsx",
@@ -258,6 +260,7 @@ export default function plugin() {
                         tool: buildConfig.npmPackage,
                         sandbox: langConfig.sandbox,
                         label,
+                        prefix: langConfig.prefix,
                     })
                     parent.children.splice(index, 1, {
                         type: "jsx",