✨ Improved and document the code based on the vue jsx plugin

solidjs · Jan 4, 2021 · 4efa4d9 · 4efa4d9
1 parent 864d016
commit 4efa4d9
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ For other breaking changes, check [the migration guide of vite](https://vitejs.d
 - HMR with minimal configuration
 - Drop-in installation as vite plugin
 - Minimal bundle size (5.99kb non gzip for a [Hello World](./playground/src/main.tsx))
-- Support typescript (`.js .ts .jsx .tsx`) out of the box
+- Support typescript (`.jsx .tsx`) out of the box, even when exported as `source` in the `node_modules`
 - Support code splitting out of the box
 
 ## Quickstart
@@ -32,15 +32,23 @@ $ npm run build # builds to /dist
 
 ## Installation
 
-Install `vite` and `vite-plugin-solid` as dev dependencies
+Install `vite`, `vite-plugin-solid` and `babel-preset-solid` as dev dependencies.
+Install `solid-js` as dependency.
+
+You have to install those so that you are in control to which solid version is used to compile your code.
 
 ```bash
 # with npm
-$ npm install -D vite vite-plugin-solid solid-js
+$ npm install -D vite vite-plugin-solid babel-preset-solid
+$ npm install solid-js
+
 # with pnpm
-$ pnpm add -D vite vite-plugin-solid solid-js
+$ pnpm add -D vite vite-plugin-solid babel-preset-solid
+$ pnpm add solid-js
+
 # with yarn
-$ yarn add -D vite vite-plugin-solid solid-js
+$ yarn add -D vite vite-plugin-solid babel-preset-solid
+$ yarn add solid-js
 ```
 
 Add it as plugin to `vite.config.ts`
@@ -61,7 +69,7 @@ Or `vite.config.js`
 
 ```js
 // vite.config.js
-import { solidPlugin } from "vite-plugin-solid";
+import solidPlugin from "vite-plugin-solid";
 
 /**
  *  @type {import('vite').UserConfig}
@@ -75,6 +83,8 @@ export default config;
 
 Finally you have to add a bit of code to your entry point to activate HMR. This might be handled automatically at some point by the plugin but for now it's manual.
 
+*NB: This is actually a partial HMR, it doesn't retain any state, it just reload the page without reloading the page...*
+
 ```ts
 const dispose = render(() => App, rootElement);
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-solid",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "solid-js integration plugin for vite 2",
   "files": [
     "dist"
@@ -16,6 +16,7 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "rollup -c && tsc --emitDeclarationOnly",
+    "dev": "rollup -c -w",
     "prepublishOnly": "pnpm build",
     "check": "package-check"
   },
@@ -37,15 +38,19 @@
   },
   "homepage": "https://github.com/amoutonbrady/vite-plugin-solid#readme",
   "peerDependencies": {
-    "vite": "^2"
+    "solid-js": "^0.23",
+    "vite": "^2.0.0-beta.4",
+    "babel-preset-solid": "^0.23"
   },
   "dependencies": {
     "@babel/core": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
-    "babel-preset-solid": "^0.23.5",
-    "vite": "^2.0.0-beta.1"
+    "babel-preset-solid": "^0.23",
+    "solid-js": "^0.23",
+    "vite": "^2.0.0-beta.4"
   },
   "devDependencies": {
+    "@babel/plugin-transform-typescript": "^7.12.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@skypack/package-check": "^0.2.2",

diff --git a/playground/index.html b/playground/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Playground</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script src="./index.tsx" type="module"></script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.jsx" type="module"></script>
+  </body>
+</html>
diff --git a/playground/index.jsx b/playground/index.jsx
@@ -0,0 +1,25 @@
+import { render } from 'solid-js/web';
+import { Router, Route } from 'solid-app-router';
+
+const App = () => <Route />;
+
+const routes = [
+  {
+    path: '/',
+    component: () => <h1>Hello world</h1>,
+  },
+];
+
+const dispose = render(
+  () => (
+    <Router routes={routes}>
+      <App />
+    </Router>
+  ),
+  document.getElementById('app'),
+);
+
+if (import.meta.hot) {
+  import.meta.hot.accept();
+  import.meta.hot.dispose(dispose);
+}
diff --git a/playground/index.tsx b/playground/index.tsx
diff --git a/playground/package.json b/playground/package.json
@@ -11,9 +11,11 @@
   "author": "Alexandre Mouton-Brady",
   "license": "ISC",
   "devDependencies": {
-    "vite": "^2.0.0-beta.1"
+    "vite": "^2.0.0-beta.4"
   },
   "dependencies": {
-    "solid-js": "^0.23.6"
+    "@vitejs/plugin-vue": "^1.0.3",
+    "solid-app-router": "^0.0.19",
+    "solid-js": "^0.23.8"
   }
 }
diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,8 +1,8 @@
-import { solidPlugin } from '..';
+import solid from '..';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-  plugins: [solidPlugin()],
+  plugins: [solid()],
 };
 
 export default config;