Skip to content

Commit 8bd82a3

Browse files
committed
build: setup multi-build with experimental jsx to literal
This will be partially rehauled with a newer implementation. Catching up from the private wip-09-05 (2024), before implementing the newer 2025 solution
1 parent b8ce8d5 commit 8bd82a3

File tree

16 files changed

+1492
-122
lines changed

16 files changed

+1492
-122
lines changed

eslint.config.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ const createPackageConfig = (packageName) => {
8383
'sonarjs/fixme-tag': 'warn',
8484
'sonarjs/no-commented-code': 'warn',
8585
'unicorn/no-empty-file': 'warn',
86+
'sonarjs/public-static-readonly': 'off',
87+
88+
'@typescript-eslint/no-unsafe-assignment': 'off',
89+
'@typescript-eslint/no-unsafe-return': 'off',
8690
},
8791
};
8892
};
@@ -97,10 +101,10 @@ export default [
97101
'**/*.old*',
98102
'**/*.config.ts',
99103
'example-app',
100-
'packages/webawesome',
101104
],
102105
},
103106
// Package-specific configs
104107
createPackageConfig('engine'),
105108
createPackageConfig('generics'),
109+
createPackageConfig('webawesome'),
106110
];

example-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
"preview": "node -C preview --watch server.js",
1010
"start": "node server.js"
1111
},
12-
"// @jsfe/webawesome": "workspace:^",
1312
"dependencies": {
13+
"@jsfe/webawesome": "workspace:^",
1414
"@gracile/gracile": "^0.8.2",
1515
"@hono/node-server": "^1.14.1",
1616
"@jsfe/engine": "workspace:^",
@@ -25,9 +25,9 @@
2525
"lit": "^3.2.1",
2626
"react": "^19.1.0",
2727
"react-dom": "^19.1.0",
28-
"use-signals": "^0.1.1",
2928
"vite": "^6.3.2"
3029
},
30+
"// use-signals": "^0.1.1",
3131
"devDependencies": {
3232
"@types/node": "^22.14.1",
3333
"@types/react": "^19.1.2",

lerna.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"packages": [
1111
//
1212
"./packages/engine",
13-
// "./packages/webawesome",
14-
"./packages/generics"
13+
"./packages/generics",
14+
"./packages/webawesome"
1515
]
1616
}

local-ci.sh

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ set -e
44

55
pnpm install --frozen-lockfile
66

7-
pnpm run ts:build
7+
pnpm run build
88

9-
pnpm turbo lint
9+
pnpm turbo lint:es
1010

1111
pnpm turbo format
1212

packages/engine/package.json

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,30 @@
2424
"url": "https://www.juliancataldo.com"
2525
},
2626
"type": "module",
27-
"types": "./dist/esm/index.d.ts",
27+
"types": "./dist/index.d.ts",
2828
"exports": {
29-
".": "./dist/esm/index.js",
30-
"./scss": "./src/styles.scss",
31-
"./scss/*": "./src/widgets/*.scss",
32-
"./css": "./dist/esm/styles.css",
33-
"./jss": "./dist/esm/styles.js",
34-
"./min": "./dist/esm-min",
35-
"./experimental": "./dist/esm/experimental.js",
29+
".": "./dist/index.js",
30+
"./experimental": "./dist/experimental.js",
3631
"./logger": {
37-
"development": "./dist/esm/utils/logger.dev.js",
38-
"default": "./dist/esm/utils/logger.prod.js"
32+
"development": "./dist/utils/logger.dev.js",
33+
"production": "./dist/utils/logger.prod.js",
34+
"default": "./dist/utils/logger.prod.js"
3935
}
4036
},
4137
"files": [
42-
"./dist/esm",
43-
"./dist/esm-min",
44-
"./src/**/*.scss",
38+
"./dist",
4539
"./vscode.html-custom-data.json",
4640
"./vscode.css-custom-data.json",
4741
"./custom-elements.json",
4842
"!/dist/**/*.test.*"
4943
],
5044
"scripts": {
5145
"// build": "pnpm clean ; pnpm ts:build ; pnpm css:build ; pnpm css:to-js",
52-
"// build:cdn": "pnpm clean ; pnpm esbuild './lib/**/*.ts' --outdir=./dist/esm-min --outbase=./lib --minify && cp dist/esm/styles.js dist/esm-min",
53-
"// css:build": "pnpm sass --no-source-map src/styles.scss:dist/esm/styles.css",
54-
"// css:dev": "pnpm sass --watch src/styles.scss:dist/esm/styles.css & pnpm css:to-js:dev",
55-
"// css:to-js": "node ../../scripts/css-to-js.js dist/esm/styles.css",
56-
"// css:to-js:dev": "nodemon dist/esm/styles.css -x 'pnpm css:to-js'",
46+
"// build:cdn": "pnpm clean ; pnpm esbuild './lib/**/*.ts' --outdir=./dist/esm-min --outbase=./lib --minify && cp dist/styles.js dist/esm-min",
47+
"// css:build": "pnpm sass --no-source-map src/styles.scss:dist/styles.css",
48+
"// css:dev": "pnpm sass --watch src/styles.scss:dist/styles.css & pnpm css:to-js:dev",
49+
"// css:to-js": "node ../../scripts/css-to-js.js dist/styles.css",
50+
"// css:to-js:dev": "nodemon dist/styles.css -x 'pnpm css:to-js'",
5751
"// dev": "pnpm ts:dev & pnpm css:dev & (sleep 3 && pnpm css:to-js:dev)",
5852
"// build 2": "pnpm clean ; pnpm ts:build || exit 0",
5953
"// dev 2": "pnpm ts:dev",

packages/generics/package.json

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,16 @@
2525
"url": "https://www.juliancataldo.com"
2626
},
2727
"type": "module",
28-
"types": "./dist/esm/index.d.ts",
28+
"types": "./dist/index.d.ts",
2929
"exports": {
30-
".": "./dist/esm/index.js",
31-
"./form": "./dist/esm/form.js",
30+
".": "./dist/lit/index.js",
31+
"./*": "./dist/lit/*.js",
32+
"./react/*": "./dist/react/*.js",
33+
"./vue/*": "./dist/vue/*.js",
34+
"./preact/*": "./dist/preact/*.js",
3235
"./scss": "./src/styles.scss",
3336
"./scss/*": "./src/widgets/*.scss",
34-
"./css": "./dist/esm/styles.css",
35-
"./jss": "./dist/esm/styles.js",
36-
"./min": "./dist/esm-min"
37+
"./css": "./dist/styles.css"
3738
},
3839
"files": [
3940
"./dist/esm",
@@ -44,32 +45,64 @@
4445
"./custom-elements.json"
4546
],
4647
"scripts": {
47-
"// build": "pnpm clean ; pnpm ts:build ; pnpm css:build ; pnpm css:to-js",
48-
"// dev": "pnpm ts:dev # & pnpm css:dev & (sleep 3 && pnpm css:to-js:dev)",
48+
"// build": "tsc",
49+
"// dev": "tsc --watch",
4950
"clean": "rm -rf ./dist",
50-
"css:build": "pnpm sass --no-source-map src/styles.scss:dist/esm/styles.css",
51-
"css:dev": "pnpm sass --watch src/styles.scss:dist/esm/styles.css & pnpm css:to-js:dev",
52-
"css:to-js": "node ../../scripts/css-to-js.js dist/esm/styles.css",
53-
"css:to-js:dev": "nodemon dist/esm/styles.css -x 'pnpm css:to-js'",
54-
"build": "pnpm tsc",
55-
"dev": "pnpm tsc --watch",
51+
"css:build": "pnpm sass --no-source-map src/styles.scss:dist/styles.css",
52+
"css:dev": "pnpm sass --watch src/styles.scss:dist/styles.css & pnpm css:to-js:dev",
53+
"css:to-js": "node ../../scripts/css-to-js.js dist/styles.css",
54+
"css:to-js:dev": "nodemon dist/styles.css -x 'pnpm css:to-js'",
55+
"build": "rollup -c",
56+
"dev": "rollup -c -w",
5657
"lint:es": "eslint --cache \"src/**/*.{ts,tsx,js}\"",
5758
"lint:es:fix": "eslint --fix --cache \"src/**/*.{ts,tsx,js}\"",
5859
"format": "prettier --cache --check \"src/**/*.{ts,tsx,js,json,md,yml}\"",
5960
"format:fix": "prettier --cache --write \"src/**/*.{ts,tsx,js,json,md,yml}\""
6061
},
6162
"dependencies": {
62-
"@jsfe/engine": "workspace:*",
63-
"@lit-labs/signals": "^0.1.2"
63+
"@jsfe/engine": "workspace:*"
6464
},
6565
"devDependencies": {
66+
"@babel/plugin-syntax-typescript": "^7.27.1",
67+
"@babel/preset-react": "^7.27.1",
68+
"@gracile-labs/babel-plugin-jsx-to-literals": "link:../../../../@gracile/gracile/packages/labs/babel-plugin-jsx-to-literals",
69+
"@lit-labs/compiler": "^1.1.1",
70+
"@rollup/plugin-babel": "^6.0.4",
71+
"@rollup/plugin-node-resolve": "^16.0.1",
72+
"@rollup/plugin-typescript": "^12.1.2",
73+
"@types/react": "^19",
74+
"@vue/babel-plugin-jsx": "^1.4.0",
75+
"babel-preset-solid": "^1.9.6",
76+
"preact-jsx-runtime": "^1.2.0",
77+
"rollup": "^4.40.1",
78+
"rollup-plugin-node-externals": "^8.0.0",
6679
"sass": "^1.86.3",
6780
"typescript": "^5.8.3"
6881
},
6982
"peerDependencies": {
70-
"lit": "^3.2.1"
83+
"@lit-labs/signals": "^0.1.2",
84+
"lit": "^3.2.1",
85+
"react": "^19",
86+
"vue": "^3.5.13"
87+
},
88+
"peerDependenciesMeta": {
89+
"lit": {
90+
"optional": true
91+
},
92+
"react": {
93+
"optional": true
94+
},
95+
"@lit-labs/signals": {
96+
"optional": true
97+
},
98+
"vue": {
99+
"optional": true
100+
}
71101
},
72102
"publishConfig": {
73103
"access": "public"
104+
},
105+
"overrides": {
106+
"signal-polyfill": "^0.2.2"
74107
}
75108
}

packages/generics/rollup.config.ts

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { babel } from '@rollup/plugin-babel';
2+
import babelPluginPresetReact from '@babel/preset-react';
3+
4+
import typescript from '@rollup/plugin-typescript';
5+
import resolve from '@rollup/plugin-node-resolve';
6+
import externals from 'rollup-plugin-node-externals';
7+
8+
import babelPluginSyntaxTypescript from '@babel/plugin-syntax-typescript';
9+
import babelPluginJsxToLiterals from '@gracile-labs/babel-plugin-jsx-to-literals/babel-plugin';
10+
import babelPluginJsxMeta from '@gracile-labs/babel-plugin-jsx-to-literals/babel-plugin-meta';
11+
import babelPluginVue from '@vue/babel-plugin-jsx';
12+
// import babelPresetSolid from 'babel-preset-solid';
13+
14+
import { defineConfig, type RollupOptions } from 'rollup';
15+
16+
const extensions = ['.js', '.ts', '.tsx'];
17+
18+
const common = {
19+
input: './src/index.framework.ts',
20+
output: {
21+
format: 'es',
22+
sourcemap: true,
23+
preserveModules: true,
24+
},
25+
plugins: [externals(), resolve({ extensions })],
26+
external: (id) => {
27+
// for link and workspace protocol
28+
return (
29+
id.includes('/@gracile') ||
30+
// id.includes('/@jsfe/engine') ||
31+
id.includes('/@jsfe/generics') ||
32+
id === 'preact' ||
33+
id.includes('/preact-jsx-runtime')
34+
);
35+
},
36+
} as const satisfies RollupOptions;
37+
38+
const babelCommonSettings = {
39+
extensions,
40+
sourceType: 'unambiguous',
41+
babelHelpers: 'bundled', // NOTE: Explicit default.
42+
} as const;
43+
44+
const tsFrameworkIncludes = [
45+
'src/index.framework.ts',
46+
'src/widgets/*.tsx',
47+
'src/form.tsx',
48+
'src/form-generic.tsx',
49+
'src/types.ts',
50+
];
51+
52+
const enabled = {
53+
lit: true,
54+
preact: true,
55+
react: true,
56+
vue: true,
57+
};
58+
59+
const options: RollupOptions[] = [];
60+
61+
// ---
62+
63+
if (enabled.lit)
64+
options.push({
65+
...common,
66+
input: './src/index.ts',
67+
output: { ...common.output, dir: 'dist/lit' },
68+
plugins: [
69+
...common.plugins,
70+
typescript({
71+
outDir: 'dist/lit',
72+
include: [
73+
'src/index.ts',
74+
'src/widgets/*.tsx',
75+
'src/form.tsx',
76+
'src/form-generic.tsx',
77+
'src/elements.tsx',
78+
'src/types.ts',
79+
],
80+
// transformers: {
81+
// after: [compileLitTemplates()],
82+
// },
83+
}),
84+
babel({
85+
...babelCommonSettings,
86+
plugins: [
87+
[babelPluginSyntaxTypescript, { isTSX: true }],
88+
[babelPluginJsxToLiterals],
89+
],
90+
}),
91+
],
92+
});
93+
94+
if (enabled.preact)
95+
options.push({
96+
...common,
97+
output: { ...common.output, dir: 'dist/preact' },
98+
plugins: [
99+
...common.plugins,
100+
typescript({ outDir: 'dist/preact', include: tsFrameworkIncludes }),
101+
babel({
102+
...babelCommonSettings,
103+
plugins: [[babelPluginJsxMeta, { framework: 'preact' }]],
104+
presets: [
105+
[
106+
babelPluginPresetReact,
107+
{ runtime: 'automatic', importSource: 'preact-jsx-runtime' },
108+
],
109+
],
110+
}),
111+
],
112+
});
113+
114+
if (enabled.react)
115+
options.push({
116+
...common,
117+
output: { ...common.output, dir: 'dist/react' },
118+
plugins: [
119+
...common.plugins,
120+
typescript({ outDir: 'dist/react', include: tsFrameworkIncludes }),
121+
babel({
122+
...babelCommonSettings,
123+
plugins: [[babelPluginJsxMeta, { framework: 'react' /* (default) */ }]],
124+
presets: [[babelPluginPresetReact, { runtime: 'automatic' }]],
125+
}),
126+
],
127+
});
128+
129+
if (enabled.vue)
130+
options.push({
131+
...common,
132+
output: { ...common.output, dir: 'dist/vue' },
133+
plugins: [
134+
...common.plugins,
135+
typescript({ outDir: 'dist/vue', include: tsFrameworkIncludes }),
136+
babel({
137+
...babelCommonSettings,
138+
plugins: [[babelPluginJsxMeta, { framework: 'vue' }], babelPluginVue],
139+
}),
140+
],
141+
});
142+
143+
export default defineConfig(options);
144+
145+
// {
146+
// ...common,
147+
// output: { ...common.output, dir: 'dist/solid' },
148+
// plugins: [
149+
// ...common.plugins,
150+
// typescript({ outDir: 'dist/solid', include: tsFrameworkIncludes }),
151+
// babel({
152+
// ...babelCommonSettings,
153+
// plugins: [[babelPluginJsxMeta, { framework: 'solid' }]],
154+
// presets: [babelPresetSolid],
155+
// }),
156+
// ],
157+
// },

0 commit comments

Comments
 (0)