@fluffjs/cli 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ComponentCompiler.js +37 -10
- package/babel-plugin-component.d.ts +3 -1
- package/babel-plugin-component.js +16 -2
- package/package.json +2 -2
package/ComponentCompiler.js
CHANGED
|
@@ -50,9 +50,18 @@ export class ComponentCompiler {
|
|
|
50
50
|
if (!metadata) {
|
|
51
51
|
return source;
|
|
52
52
|
}
|
|
53
|
-
const { selector, templateUrl, styleUrl, className } = metadata;
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
const { selector, templateUrl, template, styleUrl, styles: inlineStyles, className } = metadata;
|
|
54
|
+
let templateHtml = '';
|
|
55
|
+
if (templateUrl) {
|
|
56
|
+
const templatePath = path.resolve(componentDir, templateUrl);
|
|
57
|
+
templateHtml = fs.readFileSync(templatePath, 'utf-8');
|
|
58
|
+
}
|
|
59
|
+
else if (template) {
|
|
60
|
+
templateHtml = template;
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
return source;
|
|
64
|
+
}
|
|
56
65
|
let styles = '';
|
|
57
66
|
if (styleUrl) {
|
|
58
67
|
const stylePath = path.resolve(componentDir, styleUrl);
|
|
@@ -60,6 +69,9 @@ export class ComponentCompiler {
|
|
|
60
69
|
styles = fs.readFileSync(stylePath, 'utf-8');
|
|
61
70
|
}
|
|
62
71
|
}
|
|
72
|
+
else if (inlineStyles) {
|
|
73
|
+
styles = inlineStyles;
|
|
74
|
+
}
|
|
63
75
|
const { html, bindings, controlFlows, templateRefs } = this.parser.parse(templateHtml);
|
|
64
76
|
this.generator.setTemplateRefs(templateRefs);
|
|
65
77
|
const renderMethod = this.generator.generateRenderMethod(html, styles);
|
|
@@ -93,14 +105,27 @@ export class ComponentCompiler {
|
|
|
93
105
|
if (!metadata) {
|
|
94
106
|
return { code: source };
|
|
95
107
|
}
|
|
96
|
-
const { selector, templateUrl, styleUrl, className } = metadata;
|
|
97
|
-
|
|
98
|
-
let
|
|
108
|
+
const { selector, templateUrl, template, styleUrl, styles: inlineStyles, className } = metadata;
|
|
109
|
+
let templateHtml = '';
|
|
110
|
+
let templatePath = null;
|
|
111
|
+
if (templateUrl) {
|
|
112
|
+
templatePath = path.resolve(componentDir, templateUrl);
|
|
113
|
+
templateHtml = fs.readFileSync(templatePath, 'utf-8');
|
|
114
|
+
}
|
|
115
|
+
else if (template) {
|
|
116
|
+
templateHtml = template;
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
return { code: source };
|
|
120
|
+
}
|
|
99
121
|
const stylePath = styleUrl ? path.resolve(componentDir, styleUrl) : null;
|
|
100
122
|
let styles = '';
|
|
101
123
|
if (stylePath && fs.existsSync(stylePath)) {
|
|
102
124
|
styles = fs.readFileSync(stylePath, 'utf-8');
|
|
103
125
|
}
|
|
126
|
+
else if (inlineStyles) {
|
|
127
|
+
styles = inlineStyles;
|
|
128
|
+
}
|
|
104
129
|
if (minify) {
|
|
105
130
|
templateHtml = await minifyHtml(templateHtml, {
|
|
106
131
|
collapseWhitespace: true,
|
|
@@ -110,8 +135,7 @@ export class ComponentCompiler {
|
|
|
110
135
|
});
|
|
111
136
|
if (styles) {
|
|
112
137
|
const cssResult = await esbuild.transform(styles, {
|
|
113
|
-
loader: 'css',
|
|
114
|
-
minify: true
|
|
138
|
+
loader: 'css', minify: true
|
|
115
139
|
});
|
|
116
140
|
styles = cssResult.code;
|
|
117
141
|
}
|
|
@@ -129,11 +153,14 @@ export class ComponentCompiler {
|
|
|
129
153
|
result = 'import { FluffElement } from \'@fluffjs/fluff\';\n' + result;
|
|
130
154
|
result += `\ncustomElements.define('${selector}', ${className});\n`;
|
|
131
155
|
const tsResult = await this.stripTypeScriptWithSourceMap(result, filePath, sourcemap);
|
|
132
|
-
const watchFiles = [
|
|
156
|
+
const watchFiles = [];
|
|
157
|
+
if (templatePath) {
|
|
158
|
+
watchFiles.push(templatePath);
|
|
159
|
+
}
|
|
133
160
|
if (stylePath && fs.existsSync(stylePath)) {
|
|
134
161
|
watchFiles.push(stylePath);
|
|
135
162
|
}
|
|
136
|
-
if (sourcemap && tsResult.map) {
|
|
163
|
+
if (sourcemap && tsResult.map && templatePath) {
|
|
137
164
|
const finalMap = await this.createComponentSourceMap(tsResult.code, tsResult.map, filePath, templatePath, stylePath);
|
|
138
165
|
return { code: tsResult.code, map: finalMap, watchFiles };
|
|
139
166
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { PluginObj } from '@babel/core';
|
|
2
2
|
export interface ComponentMetadata {
|
|
3
3
|
selector: string;
|
|
4
|
-
templateUrl
|
|
4
|
+
templateUrl?: string;
|
|
5
|
+
template?: string;
|
|
5
6
|
styleUrl?: string;
|
|
7
|
+
styles?: string;
|
|
6
8
|
className: string;
|
|
7
9
|
}
|
|
8
10
|
export declare const componentMetadataMap: Map<string, ComponentMetadata>;
|
|
@@ -41,9 +41,15 @@ export default function componentPlugin() {
|
|
|
41
41
|
case 'templateUrl':
|
|
42
42
|
metadata.templateUrl = value.value;
|
|
43
43
|
break;
|
|
44
|
+
case 'template':
|
|
45
|
+
metadata.template = value.value;
|
|
46
|
+
break;
|
|
44
47
|
case 'styleUrl':
|
|
45
48
|
metadata.styleUrl = value.value;
|
|
46
49
|
break;
|
|
50
|
+
case 'styles':
|
|
51
|
+
metadata.styles = value.value;
|
|
52
|
+
break;
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
else if (t.isTemplateLiteral(value) && value.quasis.length === 1) {
|
|
@@ -55,19 +61,27 @@ export default function componentPlugin() {
|
|
|
55
61
|
case 'templateUrl':
|
|
56
62
|
metadata.templateUrl = strValue;
|
|
57
63
|
break;
|
|
64
|
+
case 'template':
|
|
65
|
+
metadata.template = strValue;
|
|
66
|
+
break;
|
|
58
67
|
case 'styleUrl':
|
|
59
68
|
metadata.styleUrl = strValue;
|
|
60
69
|
break;
|
|
70
|
+
case 'styles':
|
|
71
|
+
metadata.styles = strValue;
|
|
72
|
+
break;
|
|
61
73
|
}
|
|
62
74
|
}
|
|
63
75
|
}
|
|
64
76
|
const filename = state.filename ?? 'unknown';
|
|
65
|
-
if (metadata.selector && metadata.templateUrl && metadata.className) {
|
|
77
|
+
if (metadata.selector && (metadata.templateUrl || metadata.template) && metadata.className) {
|
|
66
78
|
componentMetadataMap.set(filename, {
|
|
67
79
|
selector: metadata.selector,
|
|
68
80
|
templateUrl: metadata.templateUrl,
|
|
81
|
+
template: metadata.template,
|
|
69
82
|
className: metadata.className,
|
|
70
|
-
styleUrl: metadata.styleUrl
|
|
83
|
+
styleUrl: metadata.styleUrl,
|
|
84
|
+
styles: metadata.styles
|
|
71
85
|
});
|
|
72
86
|
}
|
|
73
87
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluffjs/cli",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@babel/generator": "^7.28.6",
|
|
27
27
|
"@babel/parser": "^7.28.6",
|
|
28
28
|
"@babel/plugin-syntax-decorators": "^7.28.6",
|
|
29
|
-
"@babel/preset-typescript": "^7.28.
|
|
29
|
+
"@babel/preset-typescript": "^7.28.5",
|
|
30
30
|
"@babel/traverse": "^7.28.6",
|
|
31
31
|
"@babel/types": "^7.28.6",
|
|
32
32
|
"esbuild": "^0.27.2",
|