feat(core): support init files and modules (#7)

core/src/plugins/typescript/index.ts

@@ -10,23 +10,21 @@ import { Langs } from './Langs'
 import { use } from './use'
 import { Versions } from './Versions'
 
+export interface ExtraFile {
+  content: string
+  filePath: string
+}
+
 declare module '@power-playground/core' {
   export interface PluginConfigures {
     typescript: {
       compilerOptions?: monacoEditor.languages.typescript.CompilerOptions
+      extraFiles?: ExtraFile[]
+      extraModules?: ExtraFile[]
     }
   }
 }
 
-const extraModules = Object
-  .entries(Object.assign(
-    {} as Record<string, string>, {}
-  ))
-  .reduce((acc, [filePath, content]) => acc.concat({
-    filePath,
-    content
-  }), [] as { content: string, filePath: string }[])
-
 const store = getDefaultStore()
 
 export const compilerOptionsAtom = atom<
@@ -38,6 +36,9 @@ export const compilerOptionsAtom = atom<
   lib: ['esnext', 'dom', 'esnext.disposable']
 })
 
+export const extraFilesAtom = atom<ExtraFile[]>([])
+export const extraModulesAtom = atom<ExtraFile[]>([])
+
 export interface TypeScriptPluginX {
   ExtShareState: {
     typescriptVersion: string
@@ -72,23 +73,33 @@ const editor: Editor<TypeScriptPluginX> = {
       console.log('typescript.CompilerOptions', monaco.languages.typescript.typescriptDefaults.getCompilerOptions())
       console.groupEnd()
     }, [compilerOptions, defaults, monaco])
+
+    const [extraFiles] = useAtom(extraFilesAtom)
+    const [extraModules] = useAtom(extraModulesAtom)
     useEffect(() => {
       if (!defaults || !monaco) return
 
-      extraModules.forEach(({ content, filePath }) => {
+      extraFiles.forEach(({ content, filePath }) => {
         monaco.editor.createModel(
           content,
           language === 'javascript' ? 'javascript' : 'typescript',
           monaco.Uri.parse(filePath)
         )
       })
+      extraModules.forEach(({ content, filePath }) => {
+        monaco.editor.createModel(
+          content,
+          language === 'javascript' ? 'javascript' : 'typescript',
+          monaco.Uri.parse(`file:///node_modules/${filePath}`)
+        )
+      })
 
       return () => {
         monaco.editor.getModels().forEach(model => {
           if (model.uri.path !== curFilePath) model.dispose()
         })
       }
-    }, [monaco, curFilePath, language, defaults])
+    }, [monaco, curFilePath, language, defaults, extraFiles, extraModules])
   },
   topbar: [Langs],
   statusbar: [Versions]
@@ -101,6 +112,12 @@ export default definePlugin<'typescript', TypeScriptPluginX>('typescript', conf
       conf.compilerOptions
     ]))
   }
+  if (conf?.extraFiles) {
+    store.set(extraFilesAtom, conf.extraFiles)
+  }
+  if (conf?.extraModules) {
+    store.set(extraModulesAtom, conf.extraModules)
+  }
 
   return { editor }
 })

mock/.ppd.client.configure.ts

@@ -2,13 +2,30 @@ import { defineConfigure } from '@power-playground/core'
 
 import babelVar2const from './babel-plugins/var2const'
 
+const aTestInitPackage = Object.entries(import.meta.glob([
+  './a-test-init-package/**/*'
+], {
+  as: 'raw',
+  eager: true
+}))
+
 export default defineConfigure({
   plugins: {
     outputs: {
       babelTransformOptions: {
         presets: ['es2016'],
         plugins: [babelVar2const]
       }
+    },
+    typescript: {
+      extraFiles: aTestInitPackage.map(([filePath, content]) => ({
+        filePath: `file:///${filePath.slice(2)}`,
+        content
+      })),
+      extraModules: aTestInitPackage.map(([filePath, content]) => ({
+        filePath: filePath.slice(2),
+        content
+      }))
     }
   }
 })

mock/a-test-init-package/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "a-test-init-package",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts"
+}

mock/a-test-init-package/src/index.ts

@@ -0,0 +1,9 @@
+export interface Props {
+  a0?: string
+}
+
+export default function foo(props?: Props) {
+  return 'bar'
+}
+
+export * from './sum'

mock/a-test-init-package/src/sum.ts

@@ -0,0 +1,3 @@
+export function sum(a: number, b: number) {
+  return a + b
+}