chore: separate vite and module entrypoints

Exabyte-io · Feb 11, 2025 · b58f66a · b58f66a
1 parent d2116fc
commit b58f66a
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 23 deletions.
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -103,10 +103,6 @@ jobs:
         shell: bash -l {0}
         run: |
           npm install --legacy-peer-deps && npm run build
-          mkdir pages
-          cp build/index.html pages/
-          cp build/main.js pages/
-          cp build/*css pages/
 
       - name: Deploy Build
         uses: peaceiris/actions-gh-pages@v4
@@ -116,4 +112,4 @@ jobs:
         # if: github.ref == 'refs/heads/main'
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./pages
+          publish_dir: ./build
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1 +1 @@
-export {};
+export function renderThreeDEditor(materialConfig: any, newDomElement: any): void;
diff --git a/dist/index.js b/dist/index.js
@@ -5,11 +5,12 @@ import { Made } from "@mat3ra/made";
 import React from "react";
 import ReactDOM from "react-dom";
 import { ThreeDEditor } from "./components/ThreeDEditor";
-const domElement = document.getElementById("root");
-const material = new Made.Material(Made.defaultMaterialConfig);
 // eslint-disable-next-line  react/no-render-return-value
-window.threeDEditor = ReactDOM.render(_jsx(ThreeDEditor, { editable: true, material: material }), domElement);
-window.renderThreeDEditor = (materialConfig, newDomElement) => {
-    const currentMaterial = new Made.Material(materialConfig);
-    ReactDOM.render(_jsx(ThreeDEditor, { editable: true, material: currentMaterial }), newDomElement);
+const renderThreeDEditor = (materialConfig, newDomElement) => {
+    const config = materialConfig || Made.defaultMaterialConfig;
+    const domElement = newDomElement || document.getElementById("root");
+    const currentMaterial = new Made.Material(config);
+    ReactDOM.render(_jsx(ThreeDEditor, { editable: true, material: currentMaterial }), domElement);
 };
+window.renderThreeDEditor = renderThreeDEditor;
+export { renderThreeDEditor };
diff --git a/index.html b/index.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
     <title>Wave.js</title>
     <!-- URL-encoded svg favicon with theme-aware styles -->
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asvgjs%3D%22http%3A%2F%2Fsvgjs.com%2Fsvgjs%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cstyle%3E%40media%20%28prefers-color-scheme%3Alight%29%7B.theme-color%7Bfill%3A%23000000%7D%7D%40media%20%28prefers-color-scheme%3Adark%29%7B.theme-color%7Bfill%3A%23FFFFFF%7D%7D%3C%2Fstyle%3E%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20class%3D%22theme-color%22%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2280%22%20transform%3D%22rotate%28-180%20256%20256%29%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M334%20100.056C334%2050.8718%20373.847%2011%20423%2011C472.153%2011%20512%2050.8718%20512%20100.056C512%20130.306%20480.115%20171.982%20480.115%20171.982C480.115%20171.982%20427.327%20236.133%20427.327%20256.326C427.327%20276.516%20456.851%20312.743%20480.115%20341.285C497.341%20362.431%20512%20383.184%20512%20411.944C512%20461.128%20472.153%20501%20423%20501C373.847%20501%20334%20461.128%20334%20411.944C334%20384.78%20349.322%20361.543%20365.887%20341.285C389.152%20312.74%20418.674%20276.516%20418.674%20256.326C418.674%20236.289%20366.784%20171.982%20366.784%20171.982C366.784%20171.982%20334%20131.672%20334%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M0%20100.056C0%2050.8718%2039.8467%2011%2089%2011C138.153%2011%20178%2050.8718%20178%20100.056C178%20130.306%20146.115%20171.982%20146.115%20171.982C146.115%20171.982%2093.3276%20236.133%2093.3276%20256.326C93.3276%20276.516%20122.851%20312.743%20146.115%20341.285C163.341%20362.431%20178%20383.184%20178%20411.944C178%20461.128%20138.153%20501%2089%20501C39.8467%20501%200%20461.128%200%20411.944C0%20384.78%2015.3226%20361.543%2031.8867%20341.285C55.1519%20312.74%2084.6738%20276.516%2084.6738%20256.326C84.6738%20236.289%2032.7845%20171.982%2032.7845%20171.982C32.7845%20171.982%200%20131.672%200%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fsvg%3E" />
+    <link rel="icon" type="image/svg+xml"
+          href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asvgjs%3D%22http%3A%2F%2Fsvgjs.com%2Fsvgjs%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cstyle%3E%40media%20%28prefers-color-scheme%3Alight%29%7B.theme-color%7Bfill%3A%23000000%7D%7D%40media%20%28prefers-color-scheme%3Adark%29%7B.theme-color%7Bfill%3A%23FFFFFF%7D%7D%3C%2Fstyle%3E%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20class%3D%22theme-color%22%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2280%22%20transform%3D%22rotate%28-180%20256%20256%29%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M334%20100.056C334%2050.8718%20373.847%2011%20423%2011C472.153%2011%20512%2050.8718%20512%20100.056C512%20130.306%20480.115%20171.982%20480.115%20171.982C480.115%20171.982%20427.327%20236.133%20427.327%20256.326C427.327%20276.516%20456.851%20312.743%20480.115%20341.285C497.341%20362.431%20512%20383.184%20512%20411.944C512%20461.128%20472.153%20501%20423%20501C373.847%20501%20334%20461.128%20334%20411.944C334%20384.78%20349.322%20361.543%20365.887%20341.285C389.152%20312.74%20418.674%20276.516%20418.674%20256.326C418.674%20236.289%20366.784%20171.982%20366.784%20171.982C366.784%20171.982%20334%20131.672%20334%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22theme-color%22%20d%3D%22M0%20100.056C0%2050.8718%2039.8467%2011%2089%2011C138.153%2011%20178%2050.8718%20178%20100.056C178%20130.306%20146.115%20171.982%20146.115%20171.982C146.115%20171.982%2093.3276%20236.133%2093.3276%20256.326C93.3276%20276.516%20122.851%20312.743%20146.115%20341.285C163.341%20362.431%20178%20383.184%20178%20411.944C178%20461.128%20138.153%20501%2089%20501C39.8467%20501%200%20461.128%200%20411.944C0%20384.78%2015.3226%20361.543%2031.8867%20341.285C55.1519%20312.74%2084.6738%20276.516%2084.6738%20256.326C84.6738%20236.289%2032.7845%20171.982%2032.7845%20171.982C32.7845%20171.982%200%20131.672%200%20100.056Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fsvg%3E" />
 </head>
 <body>
 <noscript>Please enable JavaScript to view this website correctly.</noscript>
 <div id="root"></div>
-<script type="module" src="./src/index.jsx"></script>
+<script type="module" src="./public/app.jsx"></script>
 </body>
 </html>
diff --git a/public/app.jsx b/public/app.jsx
@@ -0,0 +1,3 @@
+import { renderThreeDEditor } from "../src/index";
+
+renderThreeDEditor();
diff --git a/src/index.jsx b/src/index.jsx
@@ -6,12 +6,14 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import { ThreeDEditor } from "./components/ThreeDEditor";
-
-const domElement = document.getElementById("root");
-const material = new Made.Material(Made.defaultMaterialConfig);
 // eslint-disable-next-line  react/no-render-return-value
-window.threeDEditor = ReactDOM.render(<ThreeDEditor editable material={material} />, domElement);
-window.renderThreeDEditor = (materialConfig, newDomElement) => {
-    const currentMaterial = new Made.Material(materialConfig);
-    ReactDOM.render(<ThreeDEditor editable material={currentMaterial} />, newDomElement);
+const renderThreeDEditor = (materialConfig, newDomElement) => {
+    const config = materialConfig || Made.defaultMaterialConfig;
+    const domElement = newDomElement || document.getElementById("root");
+
+    const currentMaterial = new Made.Material(config);
+    ReactDOM.render(<ThreeDEditor editable material={currentMaterial} />, domElement);
 };
+
+window.renderThreeDEditor = renderThreeDEditor;
+export { renderThreeDEditor };
diff --git a/vite.config.ts b/vite.config.ts
@@ -27,7 +27,8 @@ export default defineConfig({
             output: {
                 entryFileNames: "main.js", // Name the main output bundle as main.js
                 chunkFileNames: "[name]-[hash].js", // Optional: Name for dynamic imports or shared chunks
-                assetFileNames: "[name]-[hash].[ext]", // Optional: Name for assets like CSS or images
+                assetFileNames: "main.[ext]", // Optional: Name for assets like CSS or images
+                // assetFileNames: "[name]-[hash].[ext]", // Optional: Name for assets like CSS or images
             },
         },
     },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {};
		export function renderThreeDEditor(materialConfig: any, newDomElement: any): void;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { renderThreeDEditor } from "../src/index";

		renderThreeDEditor();