buner 1.0.0 → 1.0.2

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.
Files changed (7) hide show
  1. package/bin/buner.js +10 -6
  2. package/cli/helpers/format-files.ts +9 -5
  3. package/index.html +1 -1
  4. package/package.json +1 -1
  5. package/xpack/filename.ts +1 -1
  6. package/xpack/react-loader-init.tsx +4 -0
  7. package/xpack/react-loader.tsx +54 -0
package/bin/buner.js CHANGED
@@ -13,7 +13,7 @@ import { globby } from "globby";
13
13
  import { exec } from "node:child_process";
14
14
  import validateProjectName from "validate-npm-package-name";
15
15
  const name = "buner";
16
- const version = "1.0.0";
16
+ const version = "1.0.2";
17
17
  const description = "Frontend build toolkit for Vite + React SSR projects — SCSS pipeline, prerender, SSR dev server, and backend integration.";
18
18
  const type = "module";
19
19
  const license = "MIT";
@@ -212,11 +212,15 @@ const formatFiles = async (root) => {
212
212
  `;
213
213
  await fs$1.writeFile(filePath, data + os.EOL);
214
214
  filePath = path.join(root, "src/react-loader.tsx");
215
- data = await fs$1.readFile(filePath, "utf8");
216
- data = data.replace(
217
- /const blocks((?!};).)*};/s,
218
- "const blocks: { [name: string]: any } = {\n root: lazy(() => import('./organisms/root/Root')),\n};"
219
- );
215
+ await fs$1.mkdir(path.dirname(filePath), { recursive: true });
216
+ data = [
217
+ "import { lazy } from 'react';",
218
+ "",
219
+ "export const blocks: { [name: string]: any } = {",
220
+ " root: lazy(() => import('./organisms/root/Root')),",
221
+ "};",
222
+ ""
223
+ ].join("\n");
220
224
  await fs$1.writeFile(filePath, data);
221
225
  filePath = path.join(root, "src/_types/atoms.d.ts");
222
226
  await fs$1.writeFile(
package/cli/helpers/format-files.ts CHANGED
@@ -28,11 +28,15 @@ const formatFiles = async (root: string) => {
28
28
 
29
29
  // react loader
30
30
  filePath = path.join(root, 'src/react-loader.tsx');
31
- data = await fs.readFile(filePath, 'utf8');
32
- data = data.replace(
33
- /const blocks((?!};).)*};/s,
34
- "const blocks: { [name: string]: any } = {\n\troot: lazy(() => import('./organisms/root/Root')),\n};"
35
- );
31
+ await fs.mkdir(path.dirname(filePath), { recursive: true });
32
+ data = [
33
+ "import { lazy } from 'react';",
34
+ '',
35
+ 'export const blocks: { [name: string]: any } = {',
36
+ "\troot: lazy(() => import('./organisms/root/Root')),",
37
+ '};',
38
+ '',
39
+ ].join('\n');
36
40
 
37
41
  await fs.writeFile(filePath, data);
38
42
 
package/index.html CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  <body>
40
40
  <!--app-html-->
41
- <script type="module" src="/src/react-loader.tsx"></script>
41
+ <script type="module" src="/xpack/react-loader-init.tsx"></script>
42
42
  <script type="module" defer src="#__BASE_URL__/assets/js/pl-states.js"></script>
43
43
  </body>
44
44
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "buner",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Frontend build toolkit for Vite + React SSR projects — SCSS pipeline, prerender, SSR dev server, and backend integration.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/xpack/filename.ts CHANGED
@@ -30,7 +30,7 @@ export const getEntryFileName = (chunkInfo: PreRenderedChunk): string => {
30
30
  return chunkInfo.name + '.js';
31
31
  }
32
32
 
33
- if (chunkInfo.name === 'index') {
33
+ if (chunkInfo.name === 'index' || chunkInfo.name === 'react-loader-init') {
34
34
  return 'assets/js/react-loader.0x[hash].js';
35
35
  }
36
36
 
package/xpack/react-loader-init.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import { blocks } from '../src/react-loader';
2
+ import { initReactLoader } from './react-loader';
3
+
4
+ initReactLoader(blocks);
package/xpack/react-loader.tsx ADDED
@@ -0,0 +1,54 @@
1
+ import ReactDOM from 'react-dom/client';
2
+
3
+ type Blocks = { [name: string]: React.LazyExoticComponent<any> };
4
+
5
+ const renderComponent = (blocks: Blocks, scriptSection: HTMLScriptElement) => {
6
+ const blockType = scriptSection.getAttribute('data-rct');
7
+ const data = scriptSection.textContent ? scriptSection.textContent : '{}';
8
+
9
+ if (!blockType || !data) {
10
+ return;
11
+ }
12
+
13
+ const Component = blocks[blockType];
14
+
15
+ if (Component) {
16
+ scriptSection.textContent = null;
17
+ const section = document.createElement(scriptSection.getAttribute('data-tag') ?? 'section');
18
+
19
+ section.className = scriptSection.getAttribute('data-class') ?? '';
20
+ scriptSection.replaceWith(section);
21
+
22
+ const props = JSON.parse(data);
23
+
24
+ ReactDOM.createRoot(section).render(<Component {...props} />);
25
+ } else {
26
+ return <></>;
27
+ }
28
+ };
29
+
30
+ export const initReactLoader = (blocks: Blocks) => {
31
+ const renderComponents = () => {
32
+ // rct stands for 'react component type'
33
+ const scriptSections = document.querySelectorAll('script[data-rct]');
34
+
35
+ [].forEach.call(scriptSections, (s: HTMLScriptElement) => renderComponent(blocks, s));
36
+ };
37
+
38
+ window.renderComponents = renderComponents;
39
+ renderComponents();
40
+ window.addEventListener('load', () => renderComponents());
41
+
42
+ // Post a custom event to notify that the renderComponents function is ready to be used
43
+ // Usage:
44
+ // if (window.renderComponents) {
45
+ // window.renderComponents();
46
+ // } else {
47
+ // window.addEventListener('react-loaded', () => {
48
+ // window.renderComponents();
49
+ // });
50
+ // }
51
+ const event = new CustomEvent('react-loaded');
52
+
53
+ window.dispatchEvent(event);
54
+ };