Skip to content

Commit 96580e2

Browse files
jaymalvejaymalve
authored
Merge pull request #5 from jaymalve/package/vite-plugin
[Package]: Vite plugin for Flick config
2 parents 0899b1e + a21336c commit 96580e2

11 files changed

Lines changed: 158 additions & 135 deletions

File tree

‎USAGE.md‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ If you want to add Flick to an existing project:
3737
# Install runtime (required)
3838
bun add @flickjs/runtime
3939

40-
# Install compiler (required for JSX)
41-
bun add -D @flickjs/compiler @babel/core
40+
# Install vite plugin (required for JSX)
41+
bun add -D @flickjs/vite-plugin
4242

4343
# Install router (optional)
4444
bun add @flickjs/router
@@ -50,43 +50,10 @@ Create or update `vite.config.js`:
5050

5151
```js
5252
import { defineConfig } from "vite";
53-
import { transformSync } from "@babel/core";
54-
import { createRequire } from "module";
55-
import { fileURLToPath } from "url";
56-
import { dirname, resolve } from "path";
57-
58-
const __filename = fileURLToPath(import.meta.url);
59-
const __dirname = dirname(__filename);
60-
const require = createRequire(import.meta.url);
61-
62-
function flickPlugin() {
63-
const compilerPath = resolve(
64-
__dirname,
65-
"node_modules/@flickjs/compiler/dist/index.js"
66-
);
67-
const flickCompiler = require(compilerPath).default;
68-
69-
return {
70-
name: "vite-plugin-flick",
71-
transform(code, id) {
72-
if (!/\.[jt]sx$/.test(id)) return null;
73-
74-
const result = transformSync(code, {
75-
filename: id,
76-
plugins: [flickCompiler],
77-
sourceMaps: true,
78-
});
79-
80-
return {
81-
code: result.code,
82-
map: result.map,
83-
};
84-
},
85-
};
86-
}
53+
import flick from "@flickjs/vite-plugin";
8754

8855
export default defineConfig({
89-
plugins: [flickPlugin()],
56+
plugins: [flick()],
9057
});
9158
```
9259

@@ -336,11 +303,11 @@ bun add -D tailwindcss @tailwindcss/vite
336303

337304
```js
338305
import { defineConfig } from "vite";
306+
import flick from "@flickjs/vite-plugin";
339307
import tailwindcss from "@tailwindcss/vite";
340-
// ... your existing flickPlugin
341308

342309
export default defineConfig({
343-
plugins: [flickPlugin(), tailwindcss()],
310+
plugins: [flick(), tailwindcss()],
344311
});
345312
```
346313

@@ -567,11 +534,11 @@ Update `vite.config.js`:
567534

568535
```js
569536
import { defineConfig } from "vite";
537+
import flick from "@flickjs/vite-plugin";
570538
import { flickRouter } from "@flickjs/router/vite";
571-
// ... your flickPlugin from above
572539

573540
export default defineConfig({
574-
plugins: [flickPlugin(), flickRouter({ pagesDir: "pages" })],
541+
plugins: [flick(), flickRouter({ pagesDir: "pages" })],
575542
});
576543
```
577544

‎bun.lock‎

Lines changed: 26 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@
77
"packages/create-app/test-project"
88
],
99
"scripts": {
10-
"build": "bun run build:runtime && bun run build:compiler && bun run build:router && bun run build:create-app",
10+
"build": "bun run build:runtime && bun run build:compiler && bun run build:router && bun run build:vite-plugin && bun run build:create-app",
1111
"build:runtime": "cd packages/runtime && bunx tsc && bun build src/index.ts --outdir dist --minify --target browser",
1212
"build:compiler": "cd packages/compiler && bun build src/index.ts --outfile dist/index.js --target node",
1313
"build:router": "cd packages/router && bunx tsc",
14+
"build:vite-plugin": "cd packages/vite-plugin && bun build src/index.ts --outfile dist/index.js --target node --external @babel/core --external @flickjs/compiler",
1415
"build:create-app": "cd packages/create-app && bun build src/index.ts --outfile dist/index.js --target node",
1516
"clean": "rm -rf packages/*/dist",
1617
"docs:dev": "cd packages/docs && bun run dev",
1718
"docs:build": "cd packages/docs && bun run build",
1819
"docs:preview": "cd packages/docs && bun run preview",
19-
"publish:all": "bun run build && cd packages/runtime && npm publish --tag beta && cd ../compiler && npm publish --tag beta && cd ../router && npm publish --tag beta && cd ../create-app && npm publish --tag beta",
20-
"publish:dry": "bun run build && cd packages/runtime && npm publish --dry-run --tag beta && cd ../compiler && npm publish --dry-run --tag beta && cd ../router && npm publish --dry-run --tag beta && cd ../create-app && npm publish --dry-run --tag beta",
21-
"version:update": "node -e \"const fs = require('fs'); const version = process.argv[1]; ['runtime', 'compiler', 'router', 'create-app'].forEach(pkg => { const path = './packages/' + pkg + '/package.json'; const json = JSON.parse(fs.readFileSync(path)); json.version = version; fs.writeFileSync(path, JSON.stringify(json, null, 2) + '\\\\n'); });\""
20+
"publish:all": "bun run build && cd packages/runtime && npm publish --tag beta && cd ../compiler && npm publish --tag beta && cd ../router && npm publish --tag beta && cd ../vite-plugin && npm publish --tag beta && cd ../create-app && npm publish --tag beta",
21+
"publish:dry": "bun run build && cd packages/runtime && npm publish --dry-run --tag beta && cd ../compiler && npm publish --dry-run --tag beta && cd ../router && npm publish --dry-run --tag beta && cd ../vite-plugin && npm publish --dry-run --tag beta && cd ../create-app && npm publish --dry-run --tag beta",
22+
"version:update": "node -e \"const fs = require('fs'); const version = process.argv[1]; ['runtime', 'compiler', 'router', 'vite-plugin', 'create-app'].forEach(pkg => { const path = './packages/' + pkg + '/package.json'; const json = JSON.parse(fs.readFileSync(path)); json.version = version; fs.writeFileSync(path, JSON.stringify(json, null, 2) + '\\\\n'); });\""
2223
},
2324
"devDependencies": {
2425
"@types/bun": "latest"

‎packages/create-app/src/templates/config/packageJson.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ export function createPackageJson(root: string, name: string) {
1919
"@flickjs/router": "^0.0.1-beta.1",
2020
},
2121
devDependencies: {
22-
"@babel/core": "^7.24.0",
23-
"@flickjs/compiler": "^0.0.1-beta.2",
22+
"@flickjs/vite-plugin": "^0.0.1-beta.1",
2423
"@tailwindcss/vite": "^4.1.18",
2524
tailwindcss: "^4",
2625
vite: "^5.0.0",

‎packages/create-app/src/templates/config/viteConfig.ts‎

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,16 @@ import path from "path";
44
export function createViteConfig(root: string) {
55
fs.writeFileSync(
66
path.join(root, "vite.config.js"),
7-
`import { defineConfig } from 'vite';
8-
import { transformSync } from '@babel/core';
9-
import { createRequire } from 'module';
10-
import { fileURLToPath } from 'url';
11-
import { dirname, resolve } from 'path';
12-
import tailwindcss from '@tailwindcss/vite';
13-
import { flickRouter } from '@flickjs/router/vite';
14-
15-
const __filename = fileURLToPath(import.meta.url);
16-
const __dirname = dirname(__filename);
17-
const require = createRequire(import.meta.url);
18-
19-
// Custom Vite plugin for Flick JSX compilation
20-
function flickPlugin() {
21-
const compilerPath = resolve(__dirname, 'node_modules/@flickjs/compiler/dist/index.js');
22-
const flickCompiler = require(compilerPath).default;
23-
24-
return {
25-
name: 'vite-plugin-flick',
26-
enforce: 'pre',
27-
transform(code, id) {
28-
if (!/\\.[jt]sx$/.test(id)) return null;
29-
30-
const result = transformSync(code, {
31-
filename: id,
32-
plugins: [flickCompiler],
33-
parserOpts: {
34-
plugins: ['jsx', 'typescript'],
35-
},
36-
sourceMaps: true,
37-
cloneInputAst: false,
38-
configFile: false,
39-
babelrc: false,
40-
});
41-
42-
return {
43-
code: result.code,
44-
map: result.map,
45-
};
46-
},
47-
};
48-
}
7+
`import { defineConfig } from "vite";
8+
import { resolve } from "path";
9+
import tailwindcss from "@tailwindcss/vite";
10+
import { flickRouter } from "@flickjs/router/vite";
11+
import flick from "@flickjs/vite-plugin";
4912
5013
export default defineConfig({
5114
plugins: [
52-
flickPlugin(),
53-
flickRouter({ pagesDir: 'pages', root: resolve(__dirname) }),
15+
flick(),
16+
flickRouter({ pagesDir: "pages", root: resolve(__dirname) }),
5417
tailwindcss(),
5518
],
5619
});

‎packages/docs/api/index.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# API Reference
22

3-
Flick consists of three main packages:
3+
Flick consists of four main packages:
44

55
## Packages
66

@@ -22,21 +22,25 @@ File-based routing for Flick. Includes:
2222
- `Router` - Main router component
2323
- `Link` - Navigation link component
2424
- `navigate()` - Programmatic navigation
25-
- `currentPath()` - Current route
25+
- `currentPath()` - Current route
2626
- `params()` - Route params
2727

28-
### [@flickjs/compiler](/api/suspense)
28+
### @flickjs/vite-plugin
2929

30-
Babel plugin for JSX transformation. Used at build time only.
30+
Vite plugin for Flick JSX compilation. Handles all build-time transformation.
31+
32+
### @flickjs/compiler
33+
34+
Babel plugin for JSX transformation. Used internally by the vite plugin.
3135

3236
## Installation
3337

3438
```bash
3539
# Core runtime (required)
3640
bun add @flickjs/runtime
3741

38-
# Compiler (required for JSX)
39-
bun add -D @flickjs/compiler @babel/core
42+
# Vite plugin (required for JSX)
43+
bun add -D @flickjs/vite-plugin
4044

4145
# Router (optional)
4246
bun add @flickjs/router

‎packages/docs/guide/installation.md‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ If you want to add Flick to an existing project:
88
# Install runtime (required)
99
bun add @flickjs/runtime
1010

11-
# Install compiler (required for JSX)
12-
bun add -D @flickjs/compiler @babel/core
11+
# Install vite plugin (required for JSX)
12+
bun add -D @flickjs/vite-plugin
1313

1414
# Install router (optional)
1515
bun add @flickjs/router
@@ -21,43 +21,10 @@ Create or update `vite.config.js`:
2121

2222
```js
2323
import { defineConfig } from "vite";
24-
import { transformSync } from "@babel/core";
25-
import { createRequire } from "module";
26-
import { fileURLToPath } from "url";
27-
import { dirname, resolve } from "path";
28-
29-
const __filename = fileURLToPath(import.meta.url);
30-
const __dirname = dirname(__filename);
31-
const require = createRequire(import.meta.url);
32-
33-
function flickPlugin() {
34-
const compilerPath = resolve(
35-
__dirname,
36-
"node_modules/@flickjs/compiler/dist/index.js"
37-
);
38-
const flickCompiler = require(compilerPath).default;
39-
40-
return {
41-
name: "vite-plugin-flick",
42-
transform(code, id) {
43-
if (!/\.[jt]sx$/.test(id)) return null;
44-
45-
const result = transformSync(code, {
46-
filename: id,
47-
plugins: [flickCompiler],
48-
sourceMaps: true,
49-
});
50-
51-
return {
52-
code: result.code,
53-
map: result.map,
54-
};
55-
},
56-
};
57-
}
24+
import flick from "@flickjs/vite-plugin";
5825

5926
export default defineConfig({
60-
plugins: [flickPlugin()],
27+
plugins: [flick()],
6128
});
6229
```
6330

‎packages/vite-plugin/.npmignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
src/
2+
tsconfig.json
3+
.DS_Store
4+
node_modules/

‎packages/vite-plugin/package.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@flickjs/vite-plugin",
3+
"version": "0.0.1-beta.1",
4+
"description": "Vite plugin for Flick framework",
5+
"type": "module",
6+
"main": "dist/index.js",
7+
"types": "dist/index.d.ts",
8+
"exports": {
9+
".": {
10+
"types": "./dist/index.d.ts",
11+
"import": "./dist/index.js"
12+
}
13+
},
14+
"files": [
15+
"dist"
16+
],
17+
"keywords": [
18+
"vite-plugin",
19+
"flick",
20+
"jsx",
21+
"compiler",
22+
"reactive"
23+
],
24+
"author": "Jay Malave",
25+
"license": "MIT",
26+
"repository": {
27+
"type": "git",
28+
"url": "git+https://github.com/jaymalave/flick.git",
29+
"directory": "packages/vite-plugin"
30+
},
31+
"homepage": "https://github.com/jaymalave/flick#readme",
32+
"bugs": {
33+
"url": "https://github.com/jaymalave/flick/issues"
34+
},
35+
"peerDependencies": {
36+
"vite": "^5.0.0"
37+
},
38+
"dependencies": {
39+
"@babel/core": "^7.24.0",
40+
"@flickjs/compiler": "^0.0.1-beta.2"
41+
},
42+
"devDependencies": {
43+
"@types/babel__core": "^7.20.0",
44+
"vite": "^5.0.0"
45+
},
46+
"publishConfig": {
47+
"access": "public"
48+
}
49+
}

0 commit comments

Comments
 (0)