@effindomv2/create-fui-as-app 0.1.25 → 0.1.28

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.
@@ -1,2 +1,2 @@
1
- export declare const FUI_AS_VERSION = "0.1.22";
2
- export declare const RUNTIME_VERSION = "0.1.8";
1
+ export declare const FUI_AS_VERSION = "0.1.25";
2
+ export declare const RUNTIME_VERSION = "0.1.9";
@@ -1,2 +1,2 @@
1
- export const FUI_AS_VERSION = "0.1.22";
2
- export const RUNTIME_VERSION = "0.1.8";
1
+ export const FUI_AS_VERSION = "0.1.25";
2
+ export const RUNTIME_VERSION = "0.1.9";
@@ -69,7 +69,10 @@ test("createProject writes mvc scaffold when template is mvc", () => {
69
69
  assert.equal(readFileSync(join(target, "src", "fui", "Fui.ts"), "utf8").includes("@effindomv2/fui-as/src/Fui"), true);
70
70
  assert.equal(readFileSync(join(target, "src", "host", "generated", "HostEvents.ts"), "utf8").includes("onAppClockTick"), true);
71
71
  assert.equal(readFileSync(join(target, "src", "host", "generated", "HostServices.ts"), "utf8").includes("appClockNowUnixSeconds"), true);
72
- assert.equal(readFileSync(join(target, "route-shell.html"), "utf8").includes("FUI-AS Routed Demo"), true);
72
+ const routeShell = readFileSync(join(target, "route-shell.html"), "utf8");
73
+ assert.equal(routeShell.includes("FUI-AS Routed Demo"), false);
74
+ assert.equal(routeShell.includes('class="app-shell"'), true);
75
+ assert.equal(routeShell.includes('data-effindom-canvas-size-source'), true);
73
76
  }
74
77
  finally {
75
78
  rmSync(root, { recursive: true, force: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@effindomv2/create-fui-as-app",
3
- "version": "0.1.25",
3
+ "version": "0.1.28",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Scaffold a minimal EffinDom v2 FUI-AS app",
Binary file
@@ -2,7 +2,7 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
5
+ <link rel="icon" type="image/x-icon" href="./favicon.ico" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
7
  <title>FUI-AS Hello World</title>
8
8
  <style>
@@ -1,6 +1,7 @@
1
1
  import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
2
2
 
3
3
  const outputDir = "public";
4
+
4
5
  rmSync(outputDir, { recursive: true, force: true });
5
6
  mkdirSync(`${outputDir}/runtime`, { recursive: true });
6
7
 
@@ -25,4 +26,4 @@ writeFileSync(
25
26
  .replace("{{LOADING_OVERLAY_BODY}}", loadingOverlayBody),
26
27
  "utf8",
27
28
  );
28
- copyFileSync("favicon.svg", `${outputDir}/favicon.svg`);
29
+ copyFileSync("favicon.ico", `${outputDir}/favicon.ico`);
Binary file
@@ -1,174 +1,51 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" type="image/svg+xml" href="favicon.svg" />
6
- {{HEAD}}
7
- <meta name="viewport" content="width=device-width, initial-scale=1" />
8
- <base href="../" />
9
- <style>
10
- :root {
11
- font-family: system-ui, sans-serif;
12
- color-scheme: dark;
13
- --page-background:
14
- radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 32%),
15
- linear-gradient(180deg, #020611, #060d18 55%, #0a1422);
16
- --page-text: #e2e8f0;
17
- --canvas-border: #263449;
18
- --canvas-background: #0d1424;
19
- --canvas-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
20
- --sidebar-border: #18324b;
21
- --sidebar-background: rgba(6, 12, 21, 0.94);
22
- --sidebar-label: #cbd5e1;
23
- --button-background: linear-gradient(180deg, #0f3c66, #0f5e8a);
24
- --button-text: #f8fbff;
25
- --code-color: #93c5fd;
26
- }
27
-
28
- :root[data-demo-theme="light"] {
29
- color-scheme: light;
30
- --page-background:
31
- radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
32
- linear-gradient(180deg, #f8fbff, #eef4fb 55%, #e5eef8);
33
- --page-text: #102033;
34
- --canvas-border: #c5d2e2;
35
- --canvas-background: #f8fbff;
36
- --canvas-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
37
- --sidebar-border: #c5d2e2;
38
- --sidebar-background: rgba(255, 255, 255, 0.92);
39
- --sidebar-label: #334155;
40
- --button-background: linear-gradient(180deg, #2563eb, #1d4ed8);
41
- --button-text: #f8fbff;
42
- --code-color: #1d4ed8;
43
- }
44
-
45
- body {
46
- margin: 0;
47
- min-height: 100vh;
48
- display: grid;
49
- grid-template-columns: minmax(320px, 1fr) 340px;
50
- gap: 24px;
51
- padding: 24px;
52
- box-sizing: border-box;
53
- background: var(--page-background);
54
- color: var(--page-text);
55
- }
56
-
57
- .viewport {
58
- display: grid;
59
- min-width: 0;
60
- min-height: 0;
61
- }
62
-
63
- .canvas-shell {
64
- position: relative;
65
- min-width: 0;
66
- height: calc(100vh - 48px);
67
- border-radius: 16px;
68
- overflow: hidden;
69
- }
70
-
71
- canvas {
72
- box-sizing: border-box;
73
- display: block;
74
- width: 100%;
75
- height: 100%;
76
- border: 1px solid var(--canvas-border);
77
- border-radius: 16px;
78
- background: var(--canvas-background);
79
- box-shadow: var(--canvas-shadow);
80
- outline: none;
81
- }
82
-
83
- canvas:focus,
84
- canvas:focus-visible {
85
- outline: none;
86
- }
87
-
88
- {{LOADING_OVERLAY_STYLES}}
89
-
90
- .sidebar {
91
- display: grid;
92
- gap: 16px;
93
- align-content: start;
94
- padding: 20px;
95
- border: 1px solid var(--sidebar-border);
96
- border-radius: 16px;
97
- background: var(--sidebar-background);
98
- }
99
-
100
- .control-group {
101
- display: grid;
102
- gap: 8px;
103
- }
104
-
105
- .control-group label {
106
- font-size: 14px;
107
- color: var(--sidebar-label);
108
- }
109
-
110
- input[type="range"] {
111
- width: 100%;
112
- }
113
-
114
- button {
115
- padding: 10px 14px;
116
- border: 0;
117
- border-radius: 10px;
118
- background: var(--button-background);
119
- color: var(--button-text);
120
- font: inherit;
121
- cursor: pointer;
122
- }
123
-
124
- code {
125
- color: var(--code-color);
126
- }
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" type="image/x-icon" href="./favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <base href="../" />
8
+ <title>EffinDom FUI AssemblyScript Demo</title>
9
+ <style>
10
+ :root {
11
+ color-scheme: light dark;
12
+ font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
13
+ }
127
14
 
128
- @media (max-width: 1120px) {
15
+ html,
129
16
  body {
130
- grid-template-columns: 1fr;
17
+ width: 100%;
18
+ height: 100%;
19
+ margin: 0;
20
+ padding: 0;
21
+ overflow: hidden;
22
+ background: #0f172a;
131
23
  }
132
24
 
133
- .canvas-shell {
134
- height: clamp(360px, 60vh, 620px);
25
+ .app-shell {
26
+ position: fixed;
27
+ inset: 0;
28
+ overflow: hidden;
135
29
  }
136
- }
137
- </style>
138
- </head>
139
- <body>
140
- <section class="viewport">
141
- <div class="canvas-shell" data-effindom-canvas-size-source>
142
- <canvas id="fui-canvas"></canvas>
143
- {{LOADING_OVERLAY_BODY}}
144
- </div>
145
- </section>
146
-
147
- <aside class="sidebar">
148
- <div>
149
- <h1>FUI-AS demo</h1>
150
- <p>Use this routed demo shell to tweak the dashboard route and jump to the advanced-controls playground without leaving the shared runtime.</p>
151
- <p><code>Dashboard route</code></p>
152
- </div>
153
30
 
154
- <div class="control-group">
155
- <label for="hue">Accent hue <span id="hue-value">210 deg</span></label>
156
- <input id="hue" type="range" min="0" max="359" step="1" value="210" />
157
- </div>
158
-
159
- <div class="control-group">
160
- <label>Theme mode <span id="theme-mode-value">Dark</span></label>
161
- <button id="toggle-theme-mode" type="button">Switch to light mode</button>
162
- </div>
163
-
164
- <div class="control-group">
165
- <label>Clock tick <span id="tick-value">0 s</span></label>
166
- <button id="pulse-hue" type="button">Jump hue</button>
167
- </div>
168
- </aside>
31
+ canvas {
32
+ box-sizing: border-box;
33
+ display: block;
34
+ width: 100%;
35
+ height: 100%;
36
+ outline: none;
37
+ }
169
38
 
170
- <script src="./effindom-runtime-config.js"></script>
171
- <script src="./bridge.js"></script>
172
- <script type="module" src="./harness.js"></script>
173
- </body>
39
+ {{LOADING_OVERLAY_STYLES}}
40
+ </style>
41
+ </head>
42
+ <body>
43
+ <section class="app-shell" data-effindom-canvas-size-source>
44
+ <canvas id="fui-canvas"></canvas>
45
+ {{LOADING_OVERLAY_BODY}}
46
+ </section>
47
+ <script src="./effindom-runtime-config.js"></script>
48
+ <script src="./bridge.js"></script>
49
+ <script type="module" src="./harness.js"></script>
50
+ </body>
174
51
  </html>
@@ -1,173 +1,51 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <base href="../" />
7
- <title>EffinDom FUI AssemblyScript Demo</title>
8
- <style>
9
- :root {
10
- font-family: system-ui, sans-serif;
11
- color-scheme: dark;
12
- --page-background:
13
- radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 32%),
14
- linear-gradient(180deg, #020611, #060d18 55%, #0a1422);
15
- --page-text: #e2e8f0;
16
- --canvas-border: #263449;
17
- --canvas-background: #0d1424;
18
- --canvas-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
19
- --sidebar-border: #18324b;
20
- --sidebar-background: rgba(6, 12, 21, 0.94);
21
- --sidebar-label: #cbd5e1;
22
- --button-background: linear-gradient(180deg, #0f3c66, #0f5e8a);
23
- --button-text: #f8fbff;
24
- --code-color: #93c5fd;
25
- }
26
-
27
- :root[data-demo-theme="light"] {
28
- color-scheme: light;
29
- --page-background:
30
- radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
31
- linear-gradient(180deg, #f8fbff, #eef4fb 55%, #e5eef8);
32
- --page-text: #102033;
33
- --canvas-border: #c5d2e2;
34
- --canvas-background: #f8fbff;
35
- --canvas-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
36
- --sidebar-border: #c5d2e2;
37
- --sidebar-background: rgba(255, 255, 255, 0.92);
38
- --sidebar-label: #334155;
39
- --button-background: linear-gradient(180deg, #2563eb, #1d4ed8);
40
- --button-text: #f8fbff;
41
- --code-color: #1d4ed8;
42
- }
43
-
44
- body {
45
- margin: 0;
46
- min-height: 100vh;
47
- display: grid;
48
- grid-template-columns: minmax(320px, 1fr) 340px;
49
- gap: 24px;
50
- padding: 24px;
51
- box-sizing: border-box;
52
- background: var(--page-background);
53
- color: var(--page-text);
54
- }
55
-
56
- .viewport {
57
- display: grid;
58
- min-width: 0;
59
- min-height: 0;
60
- }
61
-
62
- .canvas-shell {
63
- position: relative;
64
- min-width: 0;
65
- height: calc(100vh - 48px);
66
- border-radius: 16px;
67
- overflow: hidden;
68
- }
69
-
70
- canvas {
71
- box-sizing: border-box;
72
- display: block;
73
- width: 100%;
74
- height: 100%;
75
- border: 1px solid var(--canvas-border);
76
- border-radius: 16px;
77
- background: var(--canvas-background);
78
- box-shadow: var(--canvas-shadow);
79
- outline: none;
80
- }
81
-
82
- canvas:focus,
83
- canvas:focus-visible {
84
- outline: none;
85
- }
86
-
87
- {{LOADING_OVERLAY_STYLES}}
88
-
89
- .sidebar {
90
- display: grid;
91
- gap: 16px;
92
- align-content: start;
93
- padding: 20px;
94
- border: 1px solid var(--sidebar-border);
95
- border-radius: 16px;
96
- background: var(--sidebar-background);
97
- }
98
-
99
- .control-group {
100
- display: grid;
101
- gap: 8px;
102
- }
103
-
104
- .control-group label {
105
- font-size: 14px;
106
- color: var(--sidebar-label);
107
- }
108
-
109
- input[type="range"] {
110
- width: 100%;
111
- }
112
-
113
- button {
114
- padding: 10px 14px;
115
- border: 0;
116
- border-radius: 10px;
117
- background: var(--button-background);
118
- color: var(--button-text);
119
- font: inherit;
120
- cursor: pointer;
121
- }
122
-
123
- code {
124
- color: var(--code-color);
125
- }
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
6
+ {{HEAD}}
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <base href="../" />
9
+ <style>
10
+ :root {
11
+ color-scheme: light dark;
12
+ font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
13
+ }
126
14
 
127
- @media (max-width: 1120px) {
15
+ html,
128
16
  body {
129
- grid-template-columns: 1fr;
17
+ width: 100%;
18
+ height: 100%;
19
+ margin: 0;
20
+ padding: 0;
21
+ overflow: hidden;
22
+ background: #0f172a;
130
23
  }
131
24
 
132
- .canvas-shell {
133
- height: clamp(360px, 60vh, 620px);
25
+ .app-shell {
26
+ position: fixed;
27
+ inset: 0;
28
+ overflow: hidden;
134
29
  }
135
- }
136
- </style>
137
- </head>
138
- <body>
139
- <section class="viewport">
140
- <div class="canvas-shell" data-effindom-canvas-size-source>
141
- <canvas id="fui-canvas"></canvas>
142
- {{LOADING_OVERLAY_BODY}}
143
- </div>
144
- </section>
145
-
146
- <aside class="sidebar">
147
- <div>
148
- <h1>FUI-AS Routed Demo</h1>
149
- <p>The routed demo shell keeps the dashboard, advanced-controls, and templated-controls playgrounds on the same bridge runtime.</p>
150
- <p><code>Demo MFE route</code></p>
151
- </div>
152
30
 
153
- <div class="control-group">
154
- <label for="hue">Accent hue <span id="hue-value">210 deg</span></label>
155
- <input id="hue" type="range" min="0" max="359" step="1" value="210" />
156
- </div>
157
-
158
- <div class="control-group">
159
- <label>Theme mode <span id="theme-mode-value">Dark</span></label>
160
- <button id="toggle-theme-mode" type="button">Switch to light mode</button>
161
- </div>
162
-
163
- <div class="control-group">
164
- <label>Clock tick <span id="tick-value">0 s</span></label>
165
- <button id="pulse-hue" type="button">Jump hue</button>
166
- </div>
167
- </aside>
31
+ canvas {
32
+ box-sizing: border-box;
33
+ display: block;
34
+ width: 100%;
35
+ height: 100%;
36
+ outline: none;
37
+ }
168
38
 
169
- <script src="./effindom-runtime-config.js"></script>
170
- <script src="./bridge.js"></script>
171
- <script type="module" src="./harness.js"></script>
172
- </body>
39
+ {{LOADING_OVERLAY_STYLES}}
40
+ </style>
41
+ </head>
42
+ <body>
43
+ <section class="app-shell" data-effindom-canvas-size-source>
44
+ <canvas id="fui-canvas"></canvas>
45
+ {{LOADING_OVERLAY_BODY}}
46
+ </section>
47
+ <script src="./effindom-runtime-config.js"></script>
48
+ <script src="./bridge.js"></script>
49
+ <script type="module" src="./harness.js"></script>
50
+ </body>
173
51
  </html>
@@ -14,6 +14,7 @@ function renderLoadingOverlay(template: string): string {
14
14
  .replace("{{LOADING_OVERLAY_STYLES}}", loadingOverlayStyles)
15
15
  .replace("{{LOADING_OVERLAY_BODY}}", loadingOverlayBody);
16
16
  }
17
+
17
18
  rmSync(outputDir, { recursive: true, force: true });
18
19
  mkdirSync(`${outputDir}/runtime`, { recursive: true });
19
20
  for (const route of resolvedManifest.routes) {
@@ -31,7 +32,7 @@ writeFileSync(
31
32
  'window.__effindomRuntime = Object.assign({}, window.__effindomRuntime, { manifestUrl: "./runtime/dist/effindom.v2.manifest.json" });\n',
32
33
  "utf8",
33
34
  );
34
- copyFileSync("favicon.svg", `${outputDir}/favicon.svg`);
35
+ copyFileSync("favicon.ico", `${outputDir}/favicon.ico`);
35
36
  const defaultRoute = resolvedManifest.routes.length == 0 ? undefined : resolvedManifest.routes[0];
36
37
  const defaultRouteTitle = defaultRoute == null ? "FUI-AS Routed App" : defaultRoute.title;
37
38
  const defaultRouteHref = defaultRoute == null ? "/home/" : defaultRoute.publishedRoutePath;
@@ -1,11 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="FUI-AS">
2
- <rect width="64" height="64" rx="16" fill="#0f172a"/>
3
- <path
4
- d="M8 38C11 20 26 10 36 13C43 15 43 30 34 41C28 49 21 54 17 51C13 48 15 39 23 30C34 18 47 11 57 11M27 42C34 37 42 31 50 28"
5
- fill="none"
6
- stroke="#f8fafc"
7
- stroke-linecap="round"
8
- stroke-linejoin="round"
9
- stroke-width="6.5"
10
- />
11
- </svg>
@@ -1,11 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="FUI-AS">
2
- <rect width="64" height="64" rx="16" fill="#0f172a"/>
3
- <path
4
- d="M8 38C11 20 26 10 36 13C43 15 43 30 34 41C28 49 21 54 17 51C13 48 15 39 23 30C34 18 47 11 57 11M27 42C34 37 42 31 50 28"
5
- fill="none"
6
- stroke="#f8fafc"
7
- stroke-linecap="round"
8
- stroke-linejoin="round"
9
- stroke-width="6.5"
10
- />
11
- </svg>