Skip to content

Commit 4efa4d9

Browse files
amoutonbradyamoutonbrady
committed
✨ Improved and document the code based on the vue jsx plugin
1 parent 864d016 commit 4efa4d9

11 files changed

+250
-135
lines changed

‎README.md

+16-6
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ For other breaking changes, check [the migration guide of vite](https://vitejs.d
1515
- HMR with minimal configuration
1616
- Drop-in installation as vite plugin
1717
- Minimal bundle size (5.99kb non gzip for a [Hello World](./playground/src/main.tsx))
18-
- Support typescript (`.js .ts .jsx .tsx`) out of the box
18+
- Support typescript (`.jsx .tsx`) out of the box, even when exported as `source` in the `node_modules`
1919
- Support code splitting out of the box
2020

2121
## Quickstart
@@ -32,15 +32,23 @@ $ npm run build # builds to /dist
3232

3333
## Installation
3434

35-
Install `vite` and `vite-plugin-solid` as dev dependencies
35+
Install `vite`, `vite-plugin-solid` and `babel-preset-solid` as dev dependencies.
36+
Install `solid-js` as dependency.
37+
38+
You have to install those so that you are in control to which solid version is used to compile your code.
3639

3740
```bash
3841
# with npm
39-
$ npm install -D vite vite-plugin-solid solid-js
42+
$ npm install -D vite vite-plugin-solid babel-preset-solid
43+
$ npm install solid-js
44+
4045
# with pnpm
41-
$ pnpm add -D vite vite-plugin-solid solid-js
46+
$ pnpm add -D vite vite-plugin-solid babel-preset-solid
47+
$ pnpm add solid-js
48+
4249
# with yarn
43-
$ yarn add -D vite vite-plugin-solid solid-js
50+
$ yarn add -D vite vite-plugin-solid babel-preset-solid
51+
$ yarn add solid-js
4452
```
4553

4654
Add it as plugin to `vite.config.ts`
@@ -61,7 +69,7 @@ Or `vite.config.js`
6169

6270
```js
6371
// vite.config.js
64-
import { solidPlugin } from "vite-plugin-solid";
72+
import solidPlugin from "vite-plugin-solid";
6573

6674
/**
6775
* @type {import('vite').UserConfig}
@@ -75,6 +83,8 @@ export default config;
7583

7684
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.
7785

86+
*NB: This is actually a partial HMR, it doesn't retain any state, it just reload the page without reloading the page...*
87+
7888
```ts
7989
const dispose = render(() => App, rootElement);
8090

‎package.json

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vite-plugin-solid",
3-
"version": "0.5.0",
3+
"version": "0.6.0",
44
"description": "solid-js integration plugin for vite 2",
55
"files": [
66
"dist"
@@ -16,6 +16,7 @@
1616
"types": "dist/types/index.d.ts",
1717
"scripts": {
1818
"build": "rollup -c && tsc --emitDeclarationOnly",
19+
"dev": "rollup -c -w",
1920
"prepublishOnly": "pnpm build",
2021
"check": "package-check"
2122
},
@@ -37,15 +38,19 @@
3738
},
3839
"homepage": "https://github.com/amoutonbrady/vite-plugin-solid#readme",
3940
"peerDependencies": {
40-
"vite": "^2"
41+
"solid-js": "^0.23",
42+
"vite": "^2.0.0-beta.4",
43+
"babel-preset-solid": "^0.23"
4144
},
4245
"dependencies": {
4346
"@babel/core": "^7.12.7",
4447
"@babel/preset-typescript": "^7.12.7",
45-
"babel-preset-solid": "^0.23.5",
46-
"vite": "^2.0.0-beta.1"
48+
"babel-preset-solid": "^0.23",
49+
"solid-js": "^0.23",
50+
"vite": "^2.0.0-beta.4"
4751
},
4852
"devDependencies": {
53+
"@babel/plugin-transform-typescript": "^7.12.1",
4954
"@rollup/plugin-babel": "^5.2.2",
5055
"@rollup/plugin-node-resolve": "^11.0.1",
5156
"@skypack/package-check": "^0.2.2",

‎playground/index.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Playground</title>
7-
</head>
8-
<body>
9-
<div id="app"></div>
10-
<script src="./index.tsx" type="module"></script>
11-
</body>
12-
</html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Playground</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="./index.jsx" type="module"></script>
11+
</body>
12+
</html>

‎playground/index.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render } from 'solid-js/web';
2+
import { Router, Route } from 'solid-app-router';
3+
4+
const App = () => <Route />;
5+
6+
const routes = [
7+
{
8+
path: '/',
9+
component: () => <h1>Hello world</h1>,
10+
},
11+
];
12+
13+
const dispose = render(
14+
() => (
15+
<Router routes={routes}>
16+
<App />
17+
</Router>
18+
),
19+
document.getElementById('app'),
20+
);
21+
22+
if (import.meta.hot) {
23+
import.meta.hot.accept();
24+
import.meta.hot.dispose(dispose);
25+
}

‎playground/index.tsx

-8
This file was deleted.

‎playground/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"author": "Alexandre Mouton-Brady",
1212
"license": "ISC",
1313
"devDependencies": {
14-
"vite": "^2.0.0-beta.1"
14+
"vite": "^2.0.0-beta.4"
1515
},
1616
"dependencies": {
17-
"solid-js": "^0.23.6"
17+
"@vitejs/plugin-vue": "^1.0.3",
18+
"solid-app-router": "^0.0.19",
19+
"solid-js": "^0.23.8"
1820
}
1921
}

‎playground/pnpm-lock.yaml

+28-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎playground/vite.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { solidPlugin } from '..';
1+
import solid from '..';
22
import type { UserConfig } from 'vite';
33

44
const config: UserConfig = {
5-
plugins: [solidPlugin()],
5+
plugins: [solid()],
66
};
77

88
export default config;

0 commit comments

Comments
 (0)