feat: add html template

dist/node/constants/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TEMPLATE_PATH = exports.PACKAGE_ROOT = void 0;
+const path = require("path");
+exports.PACKAGE_ROOT = path.join(__dirname, '..', '..', '..');
+exports.DEFAULT_TEMPLATE_PATH = path.join(exports.PACKAGE_ROOT, 'template.html');

dist/node/dev.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDevServer = void 0;
 const vite_1 = require("vite");
+const plugin_react_1 = require("@vitejs/plugin-react");
+const indexHtml_1 = require("./plugin/indexHtml");
 async function createDevServer(root = process.cwd()) {
     return (0, vite_1.createServer)({
         root,
+        plugins: [(0, indexHtml_1.pluginIndexHtml)(), (0, plugin_react_1.default)()]
     });
 }
 exports.createDevServer = createDevServer;

dist/node/plugin/indexHtml.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginIndexHtml = void 0;
+const promises_1 = require("fs/promises");
+const constants_1 = require("../constants");
+function pluginIndexHtml() {
+    return {
+        name: 'shaco:index-html',
+        apply: 'serve',
+        configureServer(server) {
+            return () => {
+                server.middlewares.use(async (req, res, next) => {
+                    // read template.html
+                    let content = await (0, promises_1.readFile)(constants_1.DEFAULT_TEMPLATE_PATH, 'utf-8');
+                    try {
+                        content = await server.transformIndexHtml(req.url, content, req.originalUrl);
+                        // response html borwer
+                        res.statusCode = 200;
+                        res.setHeader('Content-Type', 'text/html');
+                        res.end(content);
+                    }
+                    catch (e) {
+                        return next(e);
+                    }
+                });
+            };
+        },
+    };
+}
+exports.pluginIndexHtml = pluginIndexHtml;

dist/runtime/App.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_default_1 = require("../theme-default");
+function App() {
+    return (0, jsx_runtime_1.jsx)(theme_default_1.Layout, {});
+}
+exports.App = App;

dist/runtime/client-entry.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("react-dom/client");
+const App_1 = require("./App");
+function renderInBrowser() {
+    const containerEl = document.getElementById("root");
+    if (!containerEl) {
+        throw new Error("#root element not found");
+    }
+    (0, client_1.createRoot)(containerEl).render((0, jsx_runtime_1.jsx)(App_1.App, {}));
+}
+renderInBrowser();

dist/theme-default/Layout/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function Layout() {
+    const [count, setCount] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "This is Layout Component" }), (0, jsx_runtime_1.jsxs)("div", { children: [count, (0, jsx_runtime_1.jsx)("button", { onClick: () => setCount(count + 1), children: "Add Count" })] })] }));
+}
+exports.Layout = Layout;

dist/theme-default/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+var Layout_1 = require("./Layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });

package.json

@@ -14,10 +14,15 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^20.1.7",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "typescript": "^5.0.4"
   },
   "dependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
     "cac": "^6.7.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vite": "^4.3.7"
   }
 }