Merge pull request #16 from mistlog/develop

release 0.2.1

Author: mistlog

cli/cli.ts

@@ -1,66 +1,75 @@
 #!/usr/bin/env node
 import * as program from "commander";
-import {
-    ComposeFile,
-    ComposeDirectory,
-    InspectDirectory,
-    InspectFile,
-    CrossoutDirectory,
-    ISvelteDraftConfig,
-} from "./literator";
-import { resolve } from "path";
-import { lstatSync } from "fs";
-import { readJSONSync } from "fs-extra";
+import { ComposeDirectory, CrossoutDirectory } from "./literator";
+import { resolve, basename, join } from "path";
+import { lstatSync, readJSONSync, copySync, emptyDirSync } from "fs-extra";
 
-import { cosmiconfig } from "cosmiconfig";
-import { default as tsLoader } from "@endemolshinegroup/cosmiconfig-typescript-loader";
+import { addSvelteExtension } from "./fix";
+import { generateType } from "./type";
+import { withConfig } from "./config";
 
-const package_json = readJSONSync(resolve(__dirname, "../../package.json"));
-program.version(package_json.version);
-program.option("-w, --watch", "compose file or files in directory in watch mode");
-program.option("-clean, --clean", "remove generated files");
-program.parse(process.argv);
+const packageJSON = readJSONSync(resolve(__dirname, "../../package.json"));
+program.version(packageJSON.version);
 
-const args = program.args;
+//
+program
+    .command("build")
+    .description("build component and script")
+    .action(() => {
+        withConfig(config => {
+            const { include, outDir } = config;
+            const workingDirectory = process.cwd();
 
-if (args.length === 0) {
-    program.help();
-} else {
-    const [target] = args;
+            include.forEach(inDir => {
+                const path = resolve(workingDirectory, inDir);
+                if (lstatSync(path).isDirectory()) {
+                    ComposeDirectory(path, config, () => {
+                        const newOutDir = join(outDir, basename(inDir));
+                        emptyDirSync(newOutDir);
+                        copySync(inDir, newOutDir, {
+                            filter: (src, dest) => {
+                                if (
+                                    basename(src).endsWith(".tsx") ||
+                                    basename(src).endsWith(".ts")
+                                ) {
+                                    return false;
+                                }
 
-    if (target) {
-        if (program.clean) {
-            CrossoutDirectory(target);
-        } else {
-            Transcribe(target);
-        }
-    }
-}
+                                return true;
+                            },
+                        });
+                        addSvelteExtension(newOutDir);
+                    });
+                }
+            });
 
-function Transcribe(target: string) {
-    //
-    // find config
-    const explorer = cosmiconfig("svelte-draft", {
-        searchPlaces: [`svelte-draft.config.ts`],
-        loaders: {
-            ".ts": tsLoader,
-        },
+            generateType(include, outDir);
+        });
     });
-
-    explorer.search().then(config_info => {
-        let config: ISvelteDraftConfig = { DSLs: [] };
-        if (config_info && !config_info.isEmpty) {
-            config = { ...config, ...config_info.config };
-        }
-
-        //
-        const working_directory = process.cwd();
-        const path = resolve(working_directory, target);
-
+//
+program
+    .command("transcribe <dir>")
+    .description("generate component and script")
+    .action(dir => {
+        withConfig(config => {
+            const path = resolve(process.cwd(), dir);
+            if (lstatSync(path).isDirectory()) {
+                ComposeDirectory(path, config, () => {
+                    addSvelteExtension(path);
+                });
+            }
+        });
+    });
+//
+program
+    .command("clean <dir>")
+    .description("remove generated files")
+    .action(dir => {
+        const path = resolve(process.cwd(), dir);
         if (lstatSync(path).isDirectory()) {
-            program.watch ? InspectDirectory(path, config) : ComposeDirectory(path, config);
-        } else {
-            program.watch ? InspectFile(path, config) : ComposeFile(path, config);
+            CrossoutDirectory(path);
         }
     });
-}
+
+//
+program.parse(process.argv);

cli/config.ts

@@ -0,0 +1,20 @@
+import { ISvelteDraftConfig } from "./literator";
+import { cosmiconfig } from "cosmiconfig";
+import { default as tsLoader } from "@endemolshinegroup/cosmiconfig-typescript-loader";
+
+export function withConfig(callback: (config: ISvelteDraftConfig) => void) {
+    const explorer = cosmiconfig("svelte-draft", {
+        searchPlaces: [`svelte-draft.config.ts`],
+        loaders: {
+            ".ts": tsLoader,
+        },
+    });
+
+    explorer.search().then(configInfo => {
+        let config: ISvelteDraftConfig = { DSLs: [], include: [], outDir: "./build" };
+        if (configInfo && !configInfo.isEmpty) {
+            config = { ...config, ...configInfo.config };
+        }
+        callback(config);
+    });
+}

cli/fix.ts

@@ -0,0 +1,102 @@
+const svelte = require("svelte/compiler");
+const fs = require("fs");
+const { resolve } = require("path");
+const { transformSync } = require("@babel/core");
+const traverse = require("@babel/traverse").default;
+const generate = require("@babel/generator").default;
+const traverseDirectory = require("filewalker");
+
+async function preprocessSvelte(path) {
+    const source = fs.readFileSync(path, "utf8");
+    const { code } = await svelte.preprocess(
+        source,
+        {
+            script: ({ content, filename }) => {
+                const code = preprocessImport(content, filename);
+                return { code };
+            },
+        },
+        {
+            filename: path,
+        }
+    );
+
+    return code;
+}
+
+/**
+ * add .svelte in "import" if necessary
+ */
+function preprocessImport(content, filename) {
+    const ast = transformSync(content, {
+        filename,
+        ast: true,
+    }).ast;
+
+    traverse(ast, {
+        ImportDeclaration(astPath) {
+            const sourceName = astPath.node.source?.value;
+            if (!sourceName) {
+                return;
+            }
+            const importFrom = resolve(filename, "../", sourceName);
+            const svelteFile = importFrom + ".svelte";
+            if (fs.existsSync(svelteFile)) {
+                astPath.node.source.value += ".svelte";
+            }
+        },
+    });
+
+    const code = generate(ast).code;
+    return code;
+}
+
+function preprocessScript(content, filename) {
+    const ast = transformSync(content, {
+        filename,
+        ast: true,
+    }).ast;
+
+    traverse(ast, {
+        ImportDeclaration(astPath) {
+            const sourceName = astPath.node.source?.value;
+            if (!sourceName) {
+                return;
+            }
+            const importFrom = resolve(filename, "../", sourceName);
+            const svelteFile = importFrom + ".svelte";
+            if (fs.existsSync(svelteFile)) {
+                astPath.node.source.value += ".svelte";
+            }
+        },
+        ExportDeclaration(astPath) {
+            const sourceName = astPath.node.source?.value;
+            if (!sourceName) {
+                return;
+            }
+            const importFrom = resolve(filename, "../", sourceName);
+            const svelteFile = importFrom + ".svelte";
+            if (fs.existsSync(svelteFile)) {
+                astPath.node.source.value += ".svelte";
+            }
+        },
+    });
+
+    const code = generate(ast).code;
+    return code;
+}
+
+export async function addSvelteExtension(path) {
+    traverseDirectory(path)
+        .on("file", async (relative, stats, absolute) => {
+            if (absolute.endsWith(".svelte")) {
+                const code = await preprocessSvelte(absolute);
+                fs.writeFileSync(absolute, code, "utf8");
+            } else if (absolute.endsWith(".js")) {
+                const code = fs.readFileSync(absolute, "utf8");
+                const withExtension = preprocessScript(code, absolute);
+                fs.writeFileSync(absolute, withExtension, "utf8");
+            }
+        })
+        .walk();
+}

cli/literator.ts

@@ -15,11 +15,17 @@ import * as TypescriptPreset from "@babel/preset-typescript";
 
 export interface ISvelteDraftConfig {
     DSLs: Array<{ name: string; dsl: () => IDSL }>;
+    include?: Array<string>;
+    outDir?: string;
 }
 
-function TraverseDirectory(path: string, callback: (name: string, path: string) => void) {
+function TraverseDirectory(
+    path: string,
+    callback: (name: string, path: string) => void,
+    onTraverseEnd = () => {}
+) {
     const action = (relative: string, stats, absolute: string) => callback(relative, absolute);
-    traverse(path).on("file", action).walk();
+    traverse(path).on("file", action).on("done", onTraverseEnd).walk();
 }
 
 export function InspectDirectory(path: string, config?: ISvelteDraftConfig) {
@@ -54,22 +60,32 @@ export function InspectFile(path: string, config?: ISvelteDraftConfig) {
     });
 }
 
-export function ComposeDirectory(path: string, config?: ISvelteDraftConfig) {
-    TraverseDirectory(path, (relative: string, absolute: string) => {
-        if (absolute.endsWith(".tsx")) {
-            try {
-                ComposeFile(absolute, config);
-            } catch (error) {
-                console.log(`compose file failed: ${error.message}, source: ${relative}`);
+export function ComposeDirectory(
+    path: string,
+    config?: ISvelteDraftConfig,
+    onTraverseEnd = () => {}
+) {
+    TraverseDirectory(
+        path,
+        (relative: string, absolute: string) => {
+            if (absolute.endsWith(".tsx") || absolute.endsWith(".ts")) {
+                try {
+                    ComposeFile(absolute, config);
+                } catch (error) {
+                    console.log(`compose file failed: ${error.message}, source: ${relative}`);
+                }
             }
-        }
-    });
+        },
+        onTraverseEnd
+    );
 }
 
 export function CrossoutDirectory(path: string) {
     TraverseDirectory(path, (relative: string, absolute: string) => {
         if (absolute.endsWith(".tsx")) {
-            removeSync(absolute.replace(".tsx", ""));
+            removeSync(absolute.replace(".tsx", ".svelte"));
+        } else if (absolute.endsWith(".ts")) {
+            removeSync(absolute.replace(".ts", ".js"));
         }
     });
 }

cli/type.ts

@@ -0,0 +1,29 @@
+import { resolve } from "path";
+import { outputJSONSync, removeSync } from "fs-extra";
+import { exec } from "child_process";
+
+export function generateType(include: Array<string>, outDir: string) {
+    const workingDirectory = process.cwd();
+    const typeConfigPath = resolve(__dirname, "temp.typeconfig.json");
+    outputJSONSync(typeConfigPath, {
+        compilerOptions: {
+            target: "es6",
+            module: "commonjs",
+            moduleResolution: "node",
+            jsx: "preserve",
+            declaration: true,
+            outDir: resolve(workingDirectory, outDir),
+            emitDeclarationOnly: true,
+            esModuleInterop: true,
+        },
+        include: include.map(each => resolve(workingDirectory, each)),
+    });
+
+    exec(`npx tsc --project ${typeConfigPath}`, error => {
+        // TODO: fix error report: [svelte] Cannot find module 'magic-string'
+        // if (error) {
+        //     console.log(error);
+        // }
+        removeSync(typeConfigPath);
+    });
+}