@flow.os/style 0.0.1-dev.1771785969 → 0.0.1-dev.1771840262
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/README.md +18 -1
- package/index.ts +29 -15
- package/package.json +6 -1
- package/react.ts +68 -0
- package/resolve.ts +44 -1
- package/server.ts +299 -0
- package/shorthand.ts +34 -0
- package/style-builder/button.ts +41 -0
- package/style-builder/constants.ts +16 -0
- package/style-builder/dom.ts +18 -0
- package/style-builder/index.ts +48 -0
- package/style-builder/panel.ts +69 -0
- package/style-builder/position.ts +25 -0
- package/visual-builder.ts +822 -0
- package/vite-plugin.ts +86 -0
package/vite-plugin.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Plugin Vite: avvia il server di patch, pagina builder (iframe), transform per data-flow-style-line.
|
|
3
|
+
*/
|
|
4
|
+
import type { Plugin } from 'vite';
|
|
5
|
+
import { writeFileSync } from 'node:fs';
|
|
6
|
+
import path from 'node:path';
|
|
7
|
+
import { createStyleFlowServer } from './server.js';
|
|
8
|
+
import type { StyleFlowServerOptions } from './server.js';
|
|
9
|
+
|
|
10
|
+
const PATCH_PORT = 3757;
|
|
11
|
+
let pluginRoot = '';
|
|
12
|
+
const BUILDER_ENTRY_ID = '\0flowStyleBuilder-entry';
|
|
13
|
+
|
|
14
|
+
const BUILDER_HTML = `<!DOCTYPE html>
|
|
15
|
+
<html lang="it">
|
|
16
|
+
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Style Builder</title>
|
|
17
|
+
<style>html,body{margin:0;padding:0;height:100%;overflow:hidden}</style></head>
|
|
18
|
+
<body><script type="module" src="/__flowStyleBuilder-entry"></script></body>
|
|
19
|
+
</html>`;
|
|
20
|
+
|
|
21
|
+
const BUILDER_ENTRY_CODE = `import { initFlowStyleBuilder } from '@flow.os/style';
|
|
22
|
+
const iframe = document.createElement('iframe');
|
|
23
|
+
iframe.src = '/';
|
|
24
|
+
iframe.setAttribute('data-flow-preview', '1');
|
|
25
|
+
iframe.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100vh;border:0;z-index:1';
|
|
26
|
+
document.body.appendChild(iframe);
|
|
27
|
+
initFlowStyleBuilder({ previewIframe: iframe });
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
export type StyleFlowServerPluginOptions = StyleFlowServerOptions;
|
|
31
|
+
|
|
32
|
+
export function styleFlowServerPlugin(options: StyleFlowServerPluginOptions = {}): Plugin {
|
|
33
|
+
return {
|
|
34
|
+
name: 'flowStyleBuilder-server',
|
|
35
|
+
apply: 'serve',
|
|
36
|
+
configResolved(config) {
|
|
37
|
+
pluginRoot = config.root ?? process.cwd();
|
|
38
|
+
writeFileSync(path.resolve(pluginRoot, 'builder.html'), BUILDER_HTML);
|
|
39
|
+
},
|
|
40
|
+
resolveId(id) {
|
|
41
|
+
if (id === '/__flowStyleBuilder-entry') return BUILDER_ENTRY_ID;
|
|
42
|
+
return null;
|
|
43
|
+
},
|
|
44
|
+
load(id) {
|
|
45
|
+
if (id === BUILDER_ENTRY_ID) return BUILDER_ENTRY_CODE;
|
|
46
|
+
return null;
|
|
47
|
+
},
|
|
48
|
+
transform(code, id) {
|
|
49
|
+
if (!id.endsWith('.tsx') && !id.endsWith('.jsx')) return null;
|
|
50
|
+
const relativeFile = path.relative(pluginRoot || process.cwd(), id).replace(/\\/g, '/');
|
|
51
|
+
const out = code.replace(/\s(s|styleFlow)\s*=\s*\{/g, (match, _p1, offset) => {
|
|
52
|
+
const line = code.slice(0, offset).split(/\r?\n/).length;
|
|
53
|
+
return ` data-flow-style-line="${line}" data-flow-style-file="${relativeFile}" ${match.trim()}`;
|
|
54
|
+
});
|
|
55
|
+
return out === code ? null : { code: out, map: null };
|
|
56
|
+
},
|
|
57
|
+
configureServer(server) {
|
|
58
|
+
const root = server.config.root ?? process.cwd();
|
|
59
|
+
(server as { __flowStyleServerUrl?: string }).__flowStyleServerUrl = `http://127.0.0.1:${PATCH_PORT}`;
|
|
60
|
+
const { server: patchServer, port } = createStyleFlowServer({ ...options, root, port: PATCH_PORT });
|
|
61
|
+
patchServer.listen(port, '127.0.0.1');
|
|
62
|
+
// Servi /builder.html per primo (prima del SPA fallback di Vite)
|
|
63
|
+
const handleBuilder = (
|
|
64
|
+
req: import('node:http').IncomingMessage,
|
|
65
|
+
res: import('node:http').ServerResponse,
|
|
66
|
+
next: () => void
|
|
67
|
+
) => {
|
|
68
|
+
const url = req.url ?? '';
|
|
69
|
+
if (url === '/builder.html' || url.startsWith('/builder.html?')) {
|
|
70
|
+
res.setHeader('Content-Type', 'text/html; charset=utf-8');
|
|
71
|
+
res.end(BUILDER_HTML);
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
next();
|
|
75
|
+
};
|
|
76
|
+
const app = server.middlewares as { stack?: { route: string; handle: (req: import('node:http').IncomingMessage, res: import('node:http').ServerResponse, next: () => void) => void }[] };
|
|
77
|
+
if (Array.isArray(app.stack)) {
|
|
78
|
+
app.stack.unshift({ route: '', handle: handleBuilder });
|
|
79
|
+
} else {
|
|
80
|
+
server.middlewares.use(handleBuilder);
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export const STYLE_PATCH_SERVER_URL = `http://127.0.0.1:${PATCH_PORT}`;
|