Feat: npm create @builder.io/mitosis (#1302)

* init

* first pass

* fix

* ignore

fix

* mv

* fmt

* f

* ficeroo

* f

* k

* yee

* fixerooni

* install

* sync

* basic doc

* f

* add qwik

* cleanup example

* lint

* another pass

* bye

* fixeroos

* f

* f

* fixes

* yee

* r

* last

* f

* rl

.eslintignore

@@ -1,3 +1,6 @@
 **/dist/
 *.d.ts
-node_modules
+node_modules
+
+# ignore the starter package, it is not part of the workspace
+packages/starter/

.prettierignore

@@ -17,5 +17,7 @@ packages/e2e-*/**
 **/playwright/.cache/
 **/tsconfig.json
 
+examples/**/output/**/*
 
-examples/**/output/**/*
+# ignore the starter package, it is not part of the workspace
+# packages/starter/

.vscode/settings.json

@@ -5,6 +5,5 @@
   },
   "typescript.format.enable": true,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

.yarn/versions/2ceb5677.yml

@@ -0,0 +1,3 @@
+undecided:
+  - "@builder.io/mitosis-repo"
+  - "@builder.io/mitosis-cli"

packages/cli/src/build/build.ts

@@ -82,7 +82,7 @@ const getOptions = (config?: MitosisConfig): MitosisConfig => {
 
   if (checkIsDefined(newConfig.commonOptions?.typescript)) {
     for (const target of newConfig.targets) {
-      if (!checkIsDefined(newConfig.options[target].typescript)) {
+      if (!checkIsDefined(newConfig.options[target]?.typescript)) {
         newConfig.options[target].typescript = newConfig.commonOptions.typescript;
       }
     }

packages/starter/.gitignore

@@ -0,0 +1 @@
+template/package-lock.json

packages/starter/.npmignore

@@ -0,0 +1,3 @@
+template/package-lock.json
+
+node_modules/

packages/starter/.tool-versions

@@ -0,0 +1 @@
+nodejs 18.13.0

packages/starter/jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "jsx": "react",
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strict": true,
+    "checkJs": true
+  },
+  "include": ["./script.cjs"],
+  "exclude": ["node_modules", "**/node_modules/*"]
+}

packages/starter/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@builder.io/create-mitosis",
+  "version": "0.0.5",
+  "description": "CLI to create a new Mitosis project from a template.",
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "cross-spawn": "^7.0.3"
+  },
+  "bin": "./script.cjs",
+  "files": [
+    "script.cjs",
+    "template"
+  ],
+  "scripts": {
+    "start": "node ./script.cjs",
+    "release:dev": "yarn version prerelease && yarn npm publish --tag dev",
+    "release:patch": "yarn version patch && yarn npm publish"
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.1"
+  }
+}

packages/starter/script.cjs

@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { cwd } = require('process');
+const p = require('@clack/prompts');
+const spawn = require('cross-spawn');
+
+const USER_DIR = cwd();
+const SCRIPT_DIR = __dirname;
+
+let projectName = '';
+
+const main = async () => {
+  p.intro(`Welcome to Mitosis! Let's get started.`);
+
+  projectName = await p.text({
+    message: 'What is your Mitosis project name?',
+    defaultValue: 'my-project',
+    placeholder: 'my-project',
+    validate: (_input) => {
+      const input = _input || 'my-project';
+      if (fs.existsSync(path.join(USER_DIR, input))) return 'Folder already exists with this name';
+    },
+  });
+
+  if (typeof projectName !== 'string') {
+    p.outro(`Please provide a string for your project name. Exiting...`);
+    process.exit(0);
+  }
+
+  /**
+   * @type {string[] | symbol}
+   */
+  const targets = await p.multiselect({
+    message: 'Select your desired outputs',
+    options: [{ value: 'react' }, { value: 'svelte' }, { value: 'qwik' }],
+    required: true,
+  });
+
+  if (!Array.isArray(targets) || targets.length === 0) {
+    p.outro(`No targets selected. Exiting...`);
+    process.exit(0);
+  }
+
+  p.note('Generating your template...');
+
+  // start by copying over base starter
+  const templateFolder = path.join(SCRIPT_DIR, './template/');
+  const outputFolder = path.join(USER_DIR, projectName);
+
+  /**
+   *
+   * @param {string} filePath
+   */
+  const updateMitosisConfig = (filePath) => {
+    const config = require(filePath);
+    config.targets = targets;
+
+    return `
+/**
+ * @type {import('@builder.io/mitosis').MitosisConfig}
+ */
+module.exports = ${JSON.stringify(config, null, 2)}`;
+  };
+  /**
+   *
+   * Copy `src` to `dest`.
+   * @param {string} src
+   * @param {string} dest
+   */
+  const copy = (src, dest) => {
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach((entry) => {
+      if (entry === 'node_modules') return;
+      if (entry === 'package-lock.json') return;
+
+      // ignore folders meant for excluded targets
+      const isTargetSpecificFolder =
+        src.endsWith('/library/packages') || src.endsWith('/test-apps');
+      if (isTargetSpecificFolder && !targets.some((target) => entry === target)) {
+        return;
+      }
+
+      const srcPath = path.join(src, entry);
+      const destPath = path.join(dest, entry);
+
+      // update mitosis.config.cjs
+      if (entry === 'mitosis.config.cjs') {
+        try {
+          const newConfig = updateMitosisConfig(srcPath);
+
+          fs.writeFileSync(destPath, newConfig);
+        } catch (error) {
+          p.note('Error processing `mitosis.config.cjs`. Copying as-is.');
+          console.error(error);
+          fs.copyFileSync(srcPath, destPath);
+        }
+        return;
+      }
+
+      if (fs.lstatSync(srcPath).isDirectory()) {
+        copy(srcPath, destPath);
+      } else {
+        const fileContents = fs.readFileSync(srcPath, 'utf8');
+        // update all files to have correct package names
+        const updatedFileContents = fileContents.replace(/@template/g, '@' + projectName);
+        fs.writeFileSync(destPath, updatedFileContents);
+      }
+    });
+  };
+
+  copy(templateFolder, outputFolder);
+
+  p.note('Template generated!');
+  // ask about installing dependencies
+  const install = await p.confirm({
+    message: 'Install dependencies?',
+  });
+
+  if (install) {
+    p.note(`Installing dependencies...this may take a while!`);
+    const installProcess = spawn.sync('npm', ['install'], {
+      cwd: outputFolder,
+      stdio: 'inherit',
+    });
+  }
+
+  p.outro(`
+  You're all set!
+  
+  Next: 
+  - cd \`${projectName}/\`
+  - open the README.md for further instructions on how to run your project
+  `);
+  process.exit(0);
+};
+
+try {
+  main();
+} catch (error) {
+  p.outro(`An error occurred. Clearing folder and exiting...`);
+  console.error(error);
+
+  if (projectName) {
+    fs.rmdirSync(path.join(USER_DIR, projectName), { recursive: true });
+  }
+  process.exit(1);
+}

packages/starter/template/README.md

@@ -0,0 +1,33 @@
+# Mitosis Mono-repo Starter
+
+This is a mono-repo for Mitosis libraries. It contains a few workspaces to get you started.
+
+## Workspaces
+
+- [library](./library/): workspace containing your Mitosis project.
+  - [library/src](./library/src/): Mitosis source code of your component library.
+  - [library/packages](./library/packages/): individual outputs generated by Mitosis.
+- [test-apps](./test-apps/): dev servers that import your Mitosis components. Useful for testing your library.
+
+## Developing
+
+1. Run Mitosis in watch mode
+
+```bash
+cd library
+npm run start
+```
+
+2. If the output has its own bundling step (like Svelte/Qwik), you will need to run that build step in a separate terminal:
+
+```bash
+cd library/packages/qwik
+npm run build:watch
+```
+
+3. Finally, run the corresponding test server of your library from the previous step to see your Mitosis project in action:
+
+```bash
+cd test-apps/qwik
+npm run dev
+```

packages/starter/template/library/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  plugins: ['@builder.io/mitosis'],
+  extends: [
+    // Use this approach for our recommended rules configuration
+    'plugin:@builder.io/mitosis/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  extends: [],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+};

packages/starter/template/library/.gitignore

@@ -0,0 +1 @@
+packages/**/src

packages/starter/template/library/mitosis.config.cjs

@@ -0,0 +1,18 @@
+/**
+ * @type {import('@builder.io/mitosis').MitosisConfig}
+ */
+module.exports = {
+  files: 'src/**',
+  targets: ['qwik', 'react', 'svelte'],
+  dest: 'packages',
+  commonOptions: {
+    typescript: true,
+  },
+  options: {
+    react: {
+      stylesType: 'style-tag',
+    },
+    svelte: {},
+    qwik: {},
+  },
+};

packages/starter/template/library/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@template/library",
+  "private": true,
+  "scripts": {
+    "start": "watch 'npm run build' ./src",
+    "build": "mitosis build --c mitosis.config.cjs",
+    "lint": "eslint"
+  },
+  "type": "module",
+  "exports": {
+    "./*": "./output/*/src/index.js"
+  },
+  "dependencies": {
+    "@builder.io/eslint-plugin-mitosis": "^0.0.15",
+    "@builder.io/mitosis": "latest",
+    "@builder.io/mitosis-cli": "latest",
+    "eslint": "^8.51.0"
+  },
+  "devDependencies": {
+    "watch": "^1.0.2"
+  }
+}

packages/starter/template/library/packages/qwik/.eslintignore

@@ -0,0 +1,31 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts