elegance-js 1.17.4 → 2.0.0

package/dist/client/client.mjs

@@ -438,7 +438,36 @@ var navigateLocally = async (target, pushState = true) => {
     }
   }
   oldPageLatest.replaceWith(newPageLatest);
-  doc.head.replaceWith(newPage.head);
+  {
+    doc.head.querySelector("title")?.replaceWith(
+      newPage.head.querySelector("title") ?? ""
+    );
+    const update = (targetList, matchAgainst, action) => {
+      for (const target2 of targetList) {
+        const matching = matchAgainst.find((n) => n.isEqualNode(target2));
+        if (matching) {
+          continue;
+        }
+        action(target2);
+      }
+    };
+    const oldTags = Array.from([
+      ...Array.from(document.head.querySelectorAll("link")),
+      ...Array.from(document.head.querySelectorAll("meta")),
+      ...Array.from(document.head.querySelectorAll("script")),
+      ...Array.from(document.head.querySelectorAll("base")),
+      ...Array.from(document.head.querySelectorAll("style"))
+    ]);
+    const newTags = Array.from([
+      ...Array.from(newPage.head.querySelectorAll("link")),
+      ...Array.from(newPage.head.querySelectorAll("meta")),
+      ...Array.from(newPage.head.querySelectorAll("script")),
+      ...Array.from(newPage.head.querySelectorAll("base")),
+      ...Array.from(newPage.head.querySelectorAll("style"))
+    ]);
+    update(newTags, oldTags, (node) => document.head.appendChild(node));
+    update(oldTags, newTags, (node) => node.remove());
+  }
   if (pushState) history.pushState(null, "", targetURL.href);
   loadPage(currentPage);
   currentPage = pathname;

package/dist/global.d.ts

@@ -40,7 +40,11 @@ declare global {
     type Layout = ((child: Child) => (AnyBuiltElement | Promise<AnyBuiltElement>));
     /** The type for const metadata in layout.ts files. */
     type LayoutMetadata = ((child: Child) => (AnyBuiltElement | Promise<AnyBuiltElement>));
-    type Page = (AnyBuiltElement) | (() => AnyBuiltElement) | (() => Promise<AnyBuiltElement>);
+    /** Parameters that get passed into Page */
+    type PageProps = {
+        pageName: string;
+    };
+    type Page = (AnyBuiltElement) | ((props: PageProps) => AnyBuiltElement | Promise<AnyBuiltElement>);
     type Metadata = (() => (AnyBuiltElement)) | (() => Promise<AnyBuiltElement>);
     type ObjectAttribute<T> = T extends ObjectAttributeType.STATE ? {
         type: ObjectAttributeType;

package/dist/page_compiler.mjs

@@ -629,8 +629,7 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
   fs.writeFileSync(pageDataPath, transformedResult.code, "utf-8");
   return { sendHardReloadInstruction };
 };
-var generateLayout = async (DIST_DIR2, filePath, childIndicator) => {
-  const directory = path.dirname(filePath);
+var generateLayout = async (DIST_DIR2, filePath, directory, childIndicator) => {
   initializeState();
   initializeObjectAttributes();
   resetLoadHooks();
@@ -651,27 +650,8 @@ var generateLayout = async (DIST_DIR2, filePath, childIndicator) => {
     layoutElements = layout;
     metadataElements = metadata;
     if (isDynamic === true) {
-      const result = await esbuild.build({
-        entryPoints: [filePath],
-        bundle: false,
-        format: "iife",
-        globalName: "__exports",
-        write: false,
-        platform: "node",
-        plugins: [externalPackagesPlugin]
-      });
-      let iifeCode = result.outputFiles[0].text;
-      iifeCode = iifeCode.replace(/^var __exports = /, "");
-      const wrappedCode = `import { createRequire } from 'module'; const require = createRequire(import.meta.url);
-
-export function construct() {
-  ${iifeCode} 
-return __exports
-}`;
-      fs.writeFileSync(filePath, wrappedCode);
-      return { pageContentHTML: "", metadataHTML: "" };
+      throw new Error("ts-arc in Elegance does not support dynamic pages yet.");
     }
-    fs.rmSync(filePath, { force: true });
   } catch (e) {
     throw new Error(`Error in Page: ${directory === "" ? "/" : directory}layout.mjs - ${e}`);
   }
@@ -709,12 +689,11 @@ return __exports
   const stack = [];
   const processedPageElements = processPageElements(layoutElements, foundObjectAttributes, 0, stack);
   const renderedPage = await serverSideRenderPage(
-    processedPageElements,
-    path.dirname(filePath)
+    processedPageElements
   );
   const metadataHTML = metadataElements ? renderRecursively(metadataElements) : "";
   await generateClientPageData(
-    path.dirname(filePath),
+    path.dirname(path.join(DIST_DIR2, "dist", directory)),
     state || {},
     [...objectAttributes, ...foundObjectAttributes],
     pageLoadHooks || [],
@@ -725,7 +704,7 @@ return __exports
   return { pageContentHTML: renderedPage.bodyHTML, metadataHTML };
 };
 var builtLayouts = /* @__PURE__ */ new Map();
-var buildLayout = async (filePath) => {
+var buildLayout = async (filePath, directory) => {
   const storedState = globalThis.__SERVER_CURRENT_STATE__;
   const storedObjectAttributes = globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__;
   const storedLoadHooks = globalThis.__SERVER_CURRENT_LOADHOOKS__;
@@ -735,6 +714,7 @@ var buildLayout = async (filePath) => {
   const { pageContentHTML, metadataHTML } = await generateLayout(
     DIST_DIR,
     filePath,
+    directory,
     childIndicator
   );
   const splitAround = (str, sub) => {
@@ -753,7 +733,7 @@ var buildLayout = async (filePath) => {
       endHTML: str.substring(i)
     };
   };
-  const pageURL = path.relative(DIST_DIR, path.dirname(filePath));
+  const pageURL = directory;
   globalThis.__SERVER_CURRENT_STATE__ = storedState;
   globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__ = storedObjectAttributes;
   globalThis.__SERVER_CURRENT_LOADHOOKS__ = storedLoadHooks;
@@ -761,21 +741,21 @@ var buildLayout = async (filePath) => {
   return {
     pageContent: splitAt(pageContentHTML, childIndicator),
     metadata: splitAround(metadataHTML, childIndicator),
-    scriptTag: `<script data-layout="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/layout_data.js" defer="true"></script>`
+    scriptTag: `<script data-layout="true" type="module" src="${pageURL}${pageURL === "/" ? "" : "/"}layout_data.js" defer="true"></script>`
   };
 };
 var fetchPageLayoutHTML = async (dirname) => {
-  const relative = path.relative(DIST_DIR, dirname);
+  const relative = path.relative(options.pagesDirectory, dirname);
   let split = relative.split(path.sep).filter(Boolean);
   split.push("/");
   split.reverse();
   let layouts = [];
   for (const dir of split) {
-    const filePath = path.resolve(path.join(DIST_DIR, dir, "layout.mjs"));
+    const filePath = path.resolve(path.join(options.pagesDirectory, dir, "layout.ts"));
     if (builtLayouts.has(filePath)) {
       layouts.push(builtLayouts.get(filePath));
     } else if (fs.existsSync(filePath)) {
-      const built = await buildLayout(filePath);
+      const built = await buildLayout(filePath, dir);
       builtLayouts.set(filePath, built);
       layouts.push(built);
     }
@@ -800,14 +780,15 @@ var fetchPageLayoutHTML = async (dirname) => {
 };
 var buildPages = async (DIST_DIR2) => {
   resetLayouts();
-  const subdirectories = [...getAllSubdirectories(DIST_DIR2), ""];
+  const pagesDirectory = path.resolve(options.pagesDirectory);
+  const subdirectories = [...getAllSubdirectories(pagesDirectory), ""];
   let shouldClientHardReload = false;
   for (const directory of subdirectories) {
-    const abs = path.resolve(path.join(DIST_DIR2, directory));
-    const files = fs.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".mjs"));
+    const abs = path.resolve(path.join(pagesDirectory, directory));
+    const files = fs.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
     for (const file of files) {
       const filePath = path.join(file.parentPath, file.name);
-      const name = file.name.slice(0, file.name.length - 4);
+      const name = file.name.slice(0, file.name.length - 3);
       const isPage = file.name.includes("page");
       if (isPage == false) {
         continue;
@@ -853,29 +834,10 @@ var buildPage = async (DIST_DIR2, directory, filePath, name) => {
     pageElements = page;
     metadata = pageMetadata;
     if (isDynamicPage === true) {
-      const result = await esbuild.build({
-        entryPoints: [filePath],
-        bundle: false,
-        format: "iife",
-        globalName: "__exports",
-        write: false,
-        platform: "node",
-        plugins: [externalPackagesPlugin]
-      });
-      let iifeCode = result.outputFiles[0].text;
-      iifeCode = iifeCode.replace(/^var __exports = /, "");
-      const wrappedCode = `import { createRequire } from 'module'; const require = createRequire(import.meta.url);
-
-export function construct() {
-  ${iifeCode} 
-return __exports
-}`;
-      fs.writeFileSync(filePath, wrappedCode);
-      return false;
+      throw new Error("Dynamic page is not yet supported with ts-arc");
     }
-    fs.rmSync(filePath, { force: true });
   } catch (e) {
-    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}${name}.mjs - ${e}`);
+    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}${name}.ts - ${e}`);
   }
   if (!metadata || metadata && typeof metadata !== "function") {
     console.warn(`WARNING: ${filePath} does not export a metadata function. This is *highly* recommended.`);
@@ -883,11 +845,14 @@ return __exports
   if (!pageElements) {
     console.warn(`WARNING: ${filePath} should export a const page, which is of type () => BuiltElement<"body">.`);
   }
+  const pageProps = {
+    pageName: directory
+  };
   if (typeof pageElements === "function") {
     if (pageElements.constructor.name === "AsyncFunction") {
-      pageElements = await pageElements();
+      pageElements = await pageElements(pageProps);
     } else {
-      pageElements = pageElements();
+      pageElements = pageElements(pageProps);
     }
   }
   const state = getState();
@@ -895,7 +860,7 @@ return __exports
   const objectAttributes = getObjectAttributes();
   const layout = await fetchPageLayoutHTML(path.dirname(filePath));
   const foundObjectAttributes = await pageToHTML(
-    path.dirname(filePath),
+    path.dirname(path.join(DIST_DIR2, "dist", directory)),
     pageElements || body(),
     metadata ?? (() => head()),
     DIST_DIR2,
@@ -907,7 +872,7 @@ return __exports
   const {
     sendHardReloadInstruction
   } = await generateClientPageData(
-    path.dirname(filePath),
+    path.dirname(path.join(DIST_DIR2, "dist", directory)),
     state || {},
     [...objectAttributes, ...foundObjectAttributes],
     pageLoadHooks || [],
@@ -917,91 +882,8 @@ return __exports
   return sendHardReloadInstruction === true;
 };
 var recursionFlag = Symbol("external-node-modules-recursion");
-var externalPackagesPlugin = {
-  name: "external-packages",
-  setup(build2) {
-    build2.onResolve({ filter: /^[^./]/ }, async (args) => {
-      if (args.pluginData?.[recursionFlag]) {
-        return;
-      }
-      const result = await build2.resolve(args.path, {
-        resolveDir: args.resolveDir,
-        kind: args.kind,
-        importer: args.importer,
-        pluginData: { [recursionFlag]: true }
-      });
-      if (result.errors.length > 0 || result.external || !result.path) {
-        return { path: args.path, external: true };
-      }
-      const nodeModulesIndex = result.path.indexOf("node_modules");
-      if (nodeModulesIndex === -1) {
-        return result;
-      }
-      const isNested = result.path.includes("node_modules", nodeModulesIndex + 14);
-      if (args.path.startsWith("elegance-js")) {
-        return result;
-      }
-      if (isNested) {
-        return { path: args.path, external: true };
-      }
-      return { path: args.path, external: true };
-    });
-  }
-};
 var shippedPlugins = /* @__PURE__ */ new Map();
 var pluginsToShip = [];
-var shipPlugin = {
-  name: "ship",
-  setup(build2) {
-    build2.onLoad({ filter: /\.(js|ts|jsx|tsx)$/ }, async (args) => {
-      let contents = await fs.promises.readFile(args.path, "utf8");
-      const lines = contents.split(/\r?\n/);
-      let prepender = "";
-      for (let i = 0; i < lines.length - 1; i++) {
-        if (lines[i].trim() === "//@ship") {
-          const nextLine = lines[i + 1].trim();
-          const starRegex = /import\s*\*\s*as\s*(\w+)\s*from\s*["']([^"']+)["']\s*;/;
-          const defaultRegex = /import\s*(\w+)\s*from\s*["']([^"']+)["']\s*;/;
-          let match = nextLine.match(starRegex);
-          let importName;
-          let pkgPath;
-          if (match) {
-            importName = match[1];
-            pkgPath = match[2];
-          } else {
-            match = nextLine.match(defaultRegex);
-            if (match) {
-              importName = match[1];
-              pkgPath = match[2];
-            } else {
-              continue;
-            }
-          }
-          if (prepender === "") {
-            prepender = "export const requiredClientModules = [\n";
-          }
-          prepender += `"${importName}",
-`;
-          pluginsToShip.push({
-            path: pkgPath,
-            globalName: importName
-          });
-          const replacement = `const ${importName} = globalThis.${importName};`;
-          lines.splice(i, 2, replacement);
-          i--;
-        }
-      }
-      if (prepender !== "") {
-        prepender += "];";
-      }
-      contents = lines.join("\n");
-      return {
-        contents: prepender + contents,
-        loader: path.extname(args.path).slice(1)
-      };
-    });
-  }
-};
 var build = async () => {
   if (options.quiet === true) {
     console.log = function() {
@@ -1038,23 +920,6 @@ var build = async () => {
     const start = performance.now();
     {
       pluginsToShip = [];
-      await esbuild.build({
-        entryPoints: projectFiles.map((f) => path.join(f.parentPath, f.name)),
-        bundle: true,
-        outdir: DIST_DIR,
-        outExtension: { ".js": ".mjs" },
-        plugins: [externalPackagesPlugin, shipPlugin],
-        loader: {
-          ".ts": "ts"
-        },
-        format: "esm",
-        platform: "node",
-        keepNames: false,
-        define: {
-          "DEV": options.environment === "development" ? "true" : "false",
-          "PROD": options.environment === "development" ? "false" : "true"
-        }
-      });
       for (const plugin of pluginsToShip) {
         {
           if (shippedPlugins.has(plugin.globalName)) continue;

package/dist/server/render.d.ts

@@ -1,5 +1,5 @@
 import "../shared/bindServerElements";
 export declare const renderRecursively: (element: Child) => string;
-export declare const serverSideRenderPage: (page: Page, pathname: string) => Promise<{
+export declare const serverSideRenderPage: (page: Page, pathname?: string) => Promise<{
     bodyHTML: string;
 }>;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "elegance-js",
-  "version": "1.17.4",
+  "version": "2.0.0",
   "description": "Web-Framework",
   "type": "module",
   "bin": {
-    "dev": "./scripts/dev.js",
-    "prod": "./scripts/prod.js",
-    "static": "./scripts/export.js",
-    "bootstrap": "./scripts/bootstrap.js"
+    "dev": "./scripts/ts-arc-dev.js",
+    "prod": "./scripts/ts-arc-prod.js",
+    "bootstrap": "./scripts/bootstrap.js",
+    "native": "./scripts/native-test.js"
   },
   "scripts": {
     "build": "esbuild --format=esm --platform=node --bundle --outdir=./dist --platform=node --external:esbuild --out-extension:.js=.mjs \"./src/**/*.ts\" && tsc",

package/scripts/ts-arc-dev.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const target = join(__dirname, "./dev.js");
+
+spawnSync("npx", ["ts-arc", target], { stdio: "inherit" });

package/scripts/ts-arc-prod.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const target = join(__dirname, "./prod.js");
+
+spawnSync("npx", ["ts-arc", target], { stdio: "inherit" });

package/scripts/dev.js

@@ -1,33 +0,0 @@
-#!/usr/bin/env node
-
-import { compile } from "elegance-js/build"
-import { exec, execSync } from "node:child_process";
-
-let child = undefined;
-
-compile({
-    environment: "development",
-    outputDirectory: ".elegance",
-    pagesDirectory: "./pages",
-    publicDirectory: {
-        method: "recursive-copy",
-        path: "./public",
-    },
-    hotReload: {
-        port: 3001,
-        hostname: "localhost",
-    },
-    server: {
-        runServer: true,
-        port: 3000,
-    },
-    postCompile: () => {
-        if (child !== undefined) {
-            child.kill('SIGKILL');
-        }
-        
-        const childProcess = exec("npx @tailwindcss/cli -i \"./index.css\" -o \"../.elegance/dist/index.css\" --cwd \"./pages\" --watch")
-        
-        child = childProcess;
-    },
-})

package/scripts/export.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-
-import { compile } from "elegance-js/build"
-import { exec, execSync } from "node:child_process";
-
-compile({
-    environment: "production",
-    outputDirectory: ".elegance",
-    pagesDirectory: "./pages",
-    publicDirectory: {
-        method: "recursive-copy",
-        path: "./public",
-    },
-    server: {
-        runServer: false,
-    },
-    postCompile: () => {
-        exec("npx @tailwindcss/cli -i \"./index.css\" -o \"../.elegance/dist/index.css\" --cwd \"./pages\" --minify=true")
-    },
-})

package/scripts/prod.js

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-
-import { compile } from "elegance-js/build"
-import { exec, execSync } from "node:child_process";
-
-let child = undefined;
-
-compile({
-    environment: "production",
-    outputDirectory: ".elegance",
-    pagesDirectory: "./pages",
-    publicDirectory: {
-        method: "recursive-copy",
-        path: "./public",
-    },
-    server: {
-        runServer: true,
-        port: 3000,
-    },
-    postCompile: () => {
-        if (child !== undefined) {
-            child.kill('SIGKILL');
-        }
-        
-        const childProcess = execSync("npx @tailwindcss/cli -i \"./index.css\" -o \"../.elegance/dist/index.css\" --cwd \"./pages\" --minify=true")
-        
-        child = childProcess;
-    },
-})