Improve docs (#8)

README.md

@@ -6,7 +6,28 @@ It is essentially a bundling / packaging layer on top of Mitosis, and it allows
 
 The resulting bundles also include type declaration files.
 
+## Usage
+
+The following command will generate a new project in the current directory with the name `your-library-name`, and install all dependencies.
+
 ```
-npx create-multi-lib multee
+npx create-multi-lib <your-library-name>
 ```
 
+For more information, see this video:
+
+[![Demo of create-multi-lib on Youtube](https://img.youtube.com/vi/m1vCRogZ6HA/hqdefault.jpg)](https://www.youtube.com/watch?v=m1vCRogZ6HA)
+
+## Development
+
+Mitosis supports a wide range of frameworks, and so far we only support four: `svelte`, `react`, `vue3` and `solid-js`. If you want to add support for another framework, you can do so by adding a new `@mitosis-packager/frameworks/<framework>` directory, and implement the following modules:
+
+- `mitosis-packager/frameworks/<framework>/cypress.config.ts` - Cypress configuration file. This is mainly used to configure the development server for the Cypress tests (which is likely to vary by framework).
+
+- `mitosis-packager/frameworks/<framework>/mount.ts` - This is used by the Cypress tests to mount the component in the test runner. For some frameworks, Cypress already provides this module (e.g. `import {mount} from 'cypress/react18'`), but for others you will need to implement it yourself (for an example, see `mitosis-packager/frameworks/solid/mount.ts`).
+
+- `mitosis-packager/frameworks/<framework>/package.json` - This is the package.json file for the framework. The target framework should likely be added here as a peer dependency. Dependencies that are necessary for testing or running development servers should be added as devDependencies.
+
+- `mitosis-packager/frameworks/<framework>/vite.bundle.mts` - This is where you configure your Vite bundler. You can add plugins, configure the output directory, etc. This is also where you configure the framework-specific Vite plugins (e.g. `vite-plugin-solid-js`).
+
+The same smoke tests (i.e. those found in `mitosis-packager/template/cypress/test.cy.ts`) will run for all frameworks, so if all tests pass, you can be confident that your newly-added framework is successfully supported.

packages/create-multi-lib/README.md

@@ -0,0 +1,37 @@
+# Mitosis Packager
+
+This is a boilerplate project for turning [Mitosis](https://github.com/BuilderIO/mitosis/tree/main/docs) output into publishable UI packages.
+
+It is essentially a bundling / packaging layer on top of Mitosis, and it allows you to write your UI component just once, and have it generate multiple packages targeted at different UI frameworks (currently supporting React, Svelte, Solid, Vue3).
+
+The resulting bundles also include type declaration files.
+
+## Usage
+
+The following command will generate a new project in the current directory with the name `your-library-name`, and install all dependencies.
+
+```
+npx create-multi-lib <your-library-name>
+```
+
+For more information, see this video:
+
+[![Demo of create-multi-lib on Youtube](https://img.youtube.com/vi/m1vCRogZ6HA/hqdefault.jpg)](https://www.youtube.com/watch?v=m1vCRogZ6HA)
+
+## Development
+
+Mitosis supports a wide range of frameworks, and so far we only support four: `svelte`, `react`, `vue3` and `solid-js`. If you want to add support for another framework, you can do so by adding a new `@mitosis-packager/frameworks/<framework>` directory, and implement the following modules:
+
+- `mitosis-packager/frameworks/<framework>/cypress.config.ts` - Cypress configuration file. This is mainly used to configure the development server for the Cypress tests (which is likely to vary by framework).
+
+- `mitosis-packager/frameworks/<framework>/mount.ts` - This is used by the Cypress tests to mount the component in the test runner. For some frameworks, Cypress already provides this module (e.g. `import {mount} from 'cypress/react18'`), but for others you will need to implement it yourself (for an example, see `mitosis-packager/frameworks/solid/mount.ts`).
+
+- `mitosis-packager/frameworks/<framework>/package.json` - This is the package.json file for the framework. The target framework should likely be added here as a peer dependency. Dependencies that are necessary for testing or running development servers should be added as devDependencies.
+
+- `mitosis-packager/frameworks/<framework>/vite.bundle.mts` - This is where you configure your Vite bundler. You can add plugins, configure the output directory, etc. This is also where you configure the framework-specific Vite plugins (e.g. `vite-plugin-solid-js`).
+
+The same smoke tests (i.e. those found in `mitosis-packager/template/cypress/test.cy.ts`) will run for all frameworks, so if all tests pass, you can be confident that your newly-added framework is successfully supported.
+
+## Inspiration
+
+Some of the scripts in this project were forked from the `create-react-app` project, and modified to suit our needs.

packages/create-multi-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-multi-lib",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Create UI libraries for multiple frameworks from a single codebase.",
   "main": "index.js",
   "scripts": {

packages/mitosis-packager/README.md

@@ -0,0 +1,37 @@
+# Mitosis Packager
+
+This is a boilerplate project for turning [Mitosis](https://github.com/BuilderIO/mitosis/tree/main/docs) output into publishable UI packages.
+
+It is essentially a bundling / packaging layer on top of Mitosis, and it allows you to write your UI component just once, and have it generate multiple packages targeted at different UI frameworks (currently supporting React, Svelte, Solid, Vue3).
+
+The resulting bundles also include type declaration files.
+
+## Usage
+
+The following command will generate a new project in the current directory with the name `your-library-name`, and install all dependencies.
+
+```
+npx create-multi-lib <your-library-name>
+```
+
+For more information, see this video:
+
+[![Demo of create-multi-lib on Youtube](https://img.youtube.com/vi/m1vCRogZ6HA/hqdefault.jpg)](https://www.youtube.com/watch?v=m1vCRogZ6HA)
+
+## Development
+
+Mitosis supports a wide range of frameworks, and so far we only support four: `svelte`, `react`, `vue3` and `solid-js`. If you want to add support for another framework, you can do so by adding a new `@mitosis-packager/frameworks/<framework>` directory, and implement the following modules:
+
+- `mitosis-packager/frameworks/<framework>/cypress.config.ts` - Cypress configuration file. This is mainly used to configure the development server for the Cypress tests (which is likely to vary by framework).
+
+- `mitosis-packager/frameworks/<framework>/mount.ts` - This is used by the Cypress tests to mount the component in the test runner. For some frameworks, Cypress already provides this module (e.g. `import {mount} from 'cypress/react18'`), but for others you will need to implement it yourself (for an example, see `mitosis-packager/frameworks/solid/mount.ts`).
+
+- `mitosis-packager/frameworks/<framework>/package.json` - This is the package.json file for the framework. The target framework should likely be added here as a peer dependency. Dependencies that are necessary for testing or running development servers should be added as devDependencies.
+
+- `mitosis-packager/frameworks/<framework>/vite.bundle.mts` - This is where you configure your Vite bundler. You can add plugins, configure the output directory, etc. This is also where you configure the framework-specific Vite plugins (e.g. `vite-plugin-solid-js`).
+
+The same smoke tests (i.e. those found in `mitosis-packager/template/cypress/test.cy.ts`) will run for all frameworks, so if all tests pass, you can be confident that your newly-added framework is successfully supported.
+
+## Inspiration
+
+Some of the scripts in this project were forked from the `create-react-app` project, and modified to suit our needs.

packages/mitosis-packager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mitosis-packager",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "Scripts for building libraries targeting multiple frameworks from a single codebase, using Mitosis",
   "main": "index.js",
   "scripts": {

packages/mitosis-packager/scripts/init.js

@@ -1,3 +1,8 @@
+/**
+ * The following is a fork of a file from the create-react-app project.
+ * https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/init.js
+ */
+
 const path = require("path")
 const fs = require("fs-extra")
 const chalk = require("chalk")
@@ -25,19 +30,11 @@ function tryGitCommit(appPath) {
     })
     return true
   } catch (e) {
-    // We couldn't commit in already initialized git repo,
-    // maybe the commit author config is not set.
-    // In the future, we might supply our own committer
-    // like Ember CLI does, but for now, let's just
-    // remove the Git files to avoid a half-done state.
     console.warn("Git commit not created", e)
     console.warn("Removing .git directory...")
     try {
-      // unlinkSync() doesn't work on directories.
       fs.removeSync(path.join(appPath, ".git"))
-    } catch (removeErr) {
-      // Ignore.
-    }
+    } catch (removeErr) {}
     return false
   }
 }
@@ -60,7 +57,6 @@ module.exports = async function (
   const templatePath = path.join(__dirname, "..", "template")
   fs.copySync(templatePath, appPath)
 
-
   // rename ignore to .gitignore
   fs.renameSync(path.join(appPath, "ignore"), path.join(appPath, ".gitignore"))
 
@@ -237,21 +233,17 @@ module.exports = async function (
     console.log("Created git commit.")
   }
 
-  // Display the most elegant way to cd.
-  // This needs to handle an undefined originalDirectory for
-  // backward compatibility with old global-cli's.
   let cdpath
   if (originalDirectory && path.join(originalDirectory, appName) === appPath) {
     cdpath = appName
   } else {
     cdpath = appPath
   }
 
-  // Change displayed command to yarn instead of yarnpkg
   const displayedCommand = useYarn ? "yarn" : "npm"
 
   console.log()
-  console.log(`${emoji.get('tada')} Success! Created ${appName} at ${appPath}`)
+  console.log(`${emoji.get("tada")} Success! Created ${appName} at ${appPath}`)
   console.log("Inside that directory, you can run several commands:")
   console.log()
   console.log(chalk.cyan(`  ${displayedCommand} build`))
@@ -287,18 +279,34 @@ module.exports = async function (
   console.log(`  ${chalk.cyan(`${displayedCommand} run build`)}`)
   console.log()
   console.log("And then run one of the framework-specific Cypress tests. e.g. ")
-  console.log(`  ${chalk.cyan(`${displayedCommand} run test:${frameworks[0]}`)}`)
+  console.log(
+    `  ${chalk.cyan(`${displayedCommand} run test:${frameworks[0]}`)}`
+  )
   console.log()
-  console.log(`This is an open source project led by ${chalk.underline("https://www.magicbell.com")} and builds upon the fantastic work of the ${chalk.underline("https://www.builder.io/")} team.`)
+  console.log(
+    `This is an open source project led by ${chalk.underline(
+      "https://www.magicbell.com"
+    )} and builds upon the fantastic work of the ${chalk.underline(
+      "https://www.builder.io/"
+    )} team.`
+  )
   console.log()
-    console.log(
-      `${emoji.get("star")} If you like this project, please consider starring it on GitHub: ${chalk.underline(
-        "https://github.com/magicbell-io/mitosis-packager"
-      )} ${emoji.get("star")}`
-    )
-    console.log()
-    console.log(`${emoji.get("hammer")} Or even better, consider contributing a bundler to support your favorite framework (available Mitosis compilation targets listed here ${chalk.underline("https://github.com/BuilderIO/mitosis/blob/main/docs/configuration.md")}).`)
-    console.log()
-    console.log("Have fun!!!")
-    console.log("")
+  console.log(
+    `${emoji.get(
+      "star"
+    )} If you like this project, please consider starring it on GitHub: ${chalk.underline(
+      "https://github.com/magicbell-io/mitosis-packager"
+    )} ${emoji.get("star")}`
+  )
+  console.log()
+  console.log(
+    `${emoji.get(
+      "hammer"
+    )} Or even better, consider contributing a bundler to support your favorite framework (available Mitosis compilation targets listed here ${chalk.underline(
+      "https://github.com/BuilderIO/mitosis/blob/main/docs/configuration.md"
+    )}).`
+  )
+  console.log()
+  console.log("Have fun!!!")
+  console.log("")
 }