xpine 0.0.24 → 0.0.27

package/dist/src/scripts/xpine-build.js

@@ -4,12 +4,146 @@
 import path5 from "path";
 import fs5 from "fs-extra";
 import { build } from "esbuild";
-import ts3 from "typescript";
 
 // src/build/typescript-builder.ts
 import ts from "typescript";
 import fs from "fs-extra";
+import path2 from "path";
+
+// src/util/get-config.ts
 import path from "path";
+
+// src/util/require.ts
+import { createRequire } from "module";
+var require_default = createRequire(import.meta.url);
+
+// src/util/get-config.ts
+var rootDir = process.cwd();
+function fromRoot(pathName) {
+  if (!pathName) return rootDir;
+  return path.join(rootDir, pathName);
+}
+var userConfig = require_default(path.join(process.cwd(), "./xpine.config.mjs")).default;
+var configDefaults = {
+  rootDir: fromRoot(),
+  srcDir: fromRoot("./src"),
+  distDir: fromRoot("./dist"),
+  packageJsonPath: fromRoot("package.json"),
+  // We need to use getters here in the event someone wants to change folders, such as the dist folder
+  get distPublicDir() {
+    return path.join(this.distDir, "./public");
+  },
+  get distPublicScriptsDir() {
+    return path.join(this.distPublicDir, "./scripts");
+  },
+  get distTempFolder() {
+    return path.join(this.distDir, "./temp");
+  },
+  get clientJSBundlePath() {
+    return path.join(this.distPublicScriptsDir, "./app.js");
+  },
+  get alpineDataPath() {
+    return path.join(this.distTempFolder, "./alpine-data.ts");
+  },
+  get serverDistDir() {
+    return path.join(this.distDir, "./server");
+  },
+  get serverDistAppPath() {
+    return path.join(this.serverDistDir, "./app.js");
+  },
+  // Important dirs/paths
+  get pagesDir() {
+    return path.join(this.srcDir, "./pages");
+  },
+  get distPagesDir() {
+    return path.join(this.distDir, "./pages");
+  },
+  get publicDir() {
+    return path.join(this.srcDir, "./public");
+  },
+  get serverDir() {
+    return path.join(this.srcDir, "./server");
+  },
+  get runDir() {
+    return path.join(this.serverDir, "./run");
+  },
+  get serverAppPath() {
+    return path.join(this.serverDir, "./app.ts");
+  },
+  get globalCSSFile() {
+    return path.join(this.publicDir, "./styles/global.css");
+  }
+};
+var config = {
+  ...configDefaults,
+  ...userConfig
+};
+
+// src/context.ts
+function createContext(value) {
+  let stateValue = value;
+  let arrayQueue = {};
+  return {
+    get(id) {
+      const val = stateValue[id];
+      if (Array.isArray(val)) return val.filter((item) => item !== void 0);
+      return val;
+    },
+    set(id, callback, defaultValue) {
+      if (!stateValue[id]) stateValue[id] = defaultValue ?? null;
+      stateValue[id] = callback(stateValue[id]);
+    },
+    clear() {
+      stateValue = {};
+    },
+    getAll() {
+      return stateValue;
+    },
+    getArrayQueue() {
+      return arrayQueue;
+    },
+    addToArray(id, value2, position) {
+      const output = {
+        id,
+        value: addToContextArray(value2, position),
+        position
+      };
+      if (!arrayQueue[id]) {
+        arrayQueue[id] = [output];
+      } else {
+        arrayQueue[id].push(output);
+      }
+    },
+    runArrayQueue() {
+      Object.keys(arrayQueue).forEach((key) => {
+        arrayQueue[key].sort((a, b) => {
+          return (a?.position ?? Infinity) - (b.position ?? Infinity);
+        });
+        for (const item of arrayQueue[key]) {
+          this.set(key, item.value, []);
+        }
+      });
+      arrayQueue = {};
+    }
+  };
+}
+var context = createContext({});
+function addToContextArray(newValue, position) {
+  return function(currentValue) {
+    if (!currentValue) return [newValue];
+    if (typeof position === "number") {
+      if (position > currentValue?.length) {
+        const output = [...currentValue, ...new Array(position + 1 - currentValue.length)];
+        return output.toSpliced(position, 0, newValue);
+      }
+      if (currentValue?.[position] === void 0) return currentValue.toSpliced(position, 1, newValue);
+      return currentValue.toSpliced(position, 0, newValue);
+    }
+    return [...currentValue, newValue];
+  };
+}
+
+// src/build/typescript-builder.ts
 function findDataAttributesAndFunctions(node, sourceFile, foundDataAttributes = [], foundFunctions = []) {
   if (node.kind === ts.SyntaxKind.JsxAttribute) {
     const attribute = getAttributeValuePair(node, sourceFile);
@@ -81,18 +215,7 @@ function removeClientScriptInTSXFile(pathName, source) {
     }
     if (child.kind === ts.SyntaxKind.ImportDeclaration && child.pos >= clientDataStart) {
       const text = child.getText(source);
-      child.forEachChild((child2) => {
-        if (child2.kind === ts.SyntaxKind.StringLiteral) {
-          const text2 = child2.getText(source);
-          const importPath = text2.replace(/[\"\']/g, "");
-          const isRelativeImport = importPath.startsWith(".") || importPath.startsWith("/");
-          if (!isRelativeImport) return;
-          clientImportsToReplace.push({
-            old: importPath,
-            new: path.join(path.dirname(pathName), importPath)
-          });
-        }
-      });
+      clientImportsToReplace.push(...getImportsToAbsolutePaths(child, source, pathName));
       clientImportsToHoist.push(text);
     }
   });
@@ -108,18 +231,58 @@ function removeClientScriptInTSXFile(pathName, source) {
     clientDataStart
   };
 }
+function getImportsToAbsolutePaths(child, source, pathName) {
+  const output = [];
+  child.forEachChild((child2) => {
+    if (child2.kind === ts.SyntaxKind.StringLiteral) {
+      const text = child2.getText(source);
+      const importPath = text.replace(/[\"\']/g, "");
+      const isRelativeImport = importPath.startsWith(".") || importPath.startsWith("/");
+      if (!isRelativeImport) return;
+      output.push({
+        old: importPath,
+        new: path2.join(path2.dirname(pathName), importPath)
+      });
+    }
+  });
+  return output;
+}
+function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
+  const value = {
+    imports: "",
+    fn: ""
+  };
+  source.forEachChild((child) => {
+    if (child.kind == ts.SyntaxKind.ImportDeclaration) {
+      let importText = child.getText(source);
+      const importOutput = getImportsToAbsolutePaths(child, source, pathName);
+      for (const importItem of importOutput) {
+        importText = importText.replace(importItem.old, importItem.new);
+      }
+      value.imports = importText + "\n" + value.imports;
+    }
+    if ([ts.SyntaxKind.FirstStatement, ts.SyntaxKind.FunctionDeclaration].includes(child.kind)) {
+      let text = child.getText(source);
+      if (text.includes("xpineOnLoad")) {
+        const body = child?.body?.getText(source) || "";
+        value.fn = value.fn + "\n" + body ? `(function() ${body})();` : "";
+      }
+    }
+  });
+  return value;
+}
+async function triggerXPineOnLoad(noCache = false) {
+  context.clear();
+  const xpineOnLoad = (await import(path2.join(config.distDir, `./__xpineOnLoad.js${noCache ? `?cache=${Date.now()}` : ""}`)))?.default;
+  if (xpineOnLoad) await xpineOnLoad();
+}
 
 // src/scripts/build.ts
 import { globSync } from "glob";
 import postcss from "postcss";
 import tailwindPostcss from "@tailwindcss/postcss";
 
-// src/util/get-config.ts
-import path2 from "path";
-
-// src/util/require.ts
-import { createRequire } from "module";
-var require_default = createRequire(import.meta.url);
+// src/util/paths.ts
 function getXPineDistDir() {
   const dir = import.meta.dirname;
   const splitDir = dir.split("/xpine/dist");
@@ -130,68 +293,6 @@ function getXPineDistDir() {
   return splitDir[0] + "/xpine/dist";
 }
 
-// src/util/get-config.ts
-var rootDir = process.cwd();
-function fromRoot(pathName) {
-  if (!pathName) return rootDir;
-  return path2.join(rootDir, pathName);
-}
-var userConfig = require_default(path2.join(process.cwd(), "./xpine.config.mjs")).default;
-var configDefaults = {
-  rootDir: fromRoot(),
-  srcDir: fromRoot("./src"),
-  distDir: fromRoot("./dist"),
-  packageJsonPath: fromRoot("package.json"),
-  // We need to use getters here in the event someone wants to change folders, such as the dist folder
-  get distPublicDir() {
-    return path2.join(this.distDir, "./public");
-  },
-  get distPublicScriptsDir() {
-    return path2.join(this.distPublicDir, "./scripts");
-  },
-  get distTempFolder() {
-    return path2.join(this.distDir, "./temp");
-  },
-  get clientJSBundlePath() {
-    return path2.join(this.distPublicScriptsDir, "./app.js");
-  },
-  get alpineDataPath() {
-    return path2.join(this.distTempFolder, "./alpine-data.ts");
-  },
-  get serverDistDir() {
-    return path2.join(this.distDir, "./server");
-  },
-  get serverDistAppPath() {
-    return path2.join(this.serverDistDir, "./app.js");
-  },
-  // Important dirs/paths
-  get pagesDir() {
-    return path2.join(this.srcDir, "./pages");
-  },
-  get distPagesDir() {
-    return path2.join(this.distDir, "./pages");
-  },
-  get publicDir() {
-    return path2.join(this.srcDir, "./public");
-  },
-  get serverDir() {
-    return path2.join(this.srcDir, "./server");
-  },
-  get runDir() {
-    return path2.join(this.serverDir, "./run");
-  },
-  get serverAppPath() {
-    return path2.join(this.serverDir, "./app.ts");
-  },
-  get globalCSSFile() {
-    return path2.join(this.publicDir, "./styles/global.css");
-  }
-};
-var config = {
-  ...configDefaults,
-  ...userConfig
-};
-
 // src/util/postcss/remove-layers.ts
 var plugin = (opts = {}) => {
   return {
@@ -265,13 +366,16 @@ function transformTSXFiles(componentData, pageConfigFiles) {
           ts2.ScriptTarget.Latest
         );
         const cleanedContent = removeClientScriptInTSXFile(args.path, source);
-        const htmlImportStart = "import { html } from 'xpine';\n";
-        const newContent = `${htmlImportStart}${cleanedContent.content}`;
+        const htmlImportStart = [
+          "import { html } from 'xpine';"
+        ];
+        const newContent = `${htmlImportStart.join("\n")}${cleanedContent.content}`;
         componentData.push({
           ...args,
           contents: `${htmlImportStart}${cleanedContent.fullContent}`,
           clientContent: cleanedContent.clientContent,
-          configFiles: isAConfigFile(args?.path) ? null : getConfigFiles(args.path, pageConfigFiles)
+          configFiles: isAConfigFile(args?.path) ? null : getConfigFiles(args.path, pageConfigFiles),
+          source
         });
         return {
           contents: newContent,
@@ -286,7 +390,7 @@ function transformTSXFiles(componentData, pageConfigFiles) {
 import fs3 from "fs-extra";
 import path4 from "path";
 import builtinModules from "builtin-modules";
-function addDotJS(allPackages2, extensions2, isDev) {
+function addDotJS(allPackages2, extensions2, isDev2) {
   const allPackagesIncludingNode = allPackages2.concat(builtinModules);
   return {
     name: "add-dot-js",
@@ -304,7 +408,7 @@ function addDotJS(allPackages2, extensions2, isDev) {
           }
           let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
           outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
-          return { path: outputPath + (isDev ? `?cache=${Date.now()}` : ""), external: true };
+          return { path: outputPath + (isDev2 ? `?cache=${Date.now()}` : ""), external: true };
         }
       });
     }
@@ -341,23 +445,29 @@ var extensions = [".ts", ".tsx"];
 var packageJson = JSON.parse(fs5.readFileSync(config.packageJsonPath, "utf-8"));
 var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
 var xpineDistDir = getXPineDistDir();
-async function buildApp(isDev = false, removePreviousBuild = false) {
+async function buildApp(args) {
+  const isDev2 = args?.isDev || false;
+  const removePreviousBuild2 = args?.removePreviousBuild || false;
+  const disableTailwind2 = args?.disableTailwind || false;
   try {
-    if (removePreviousBuild) fs5.removeSync(config.distDir);
+    if (removePreviousBuild2) fs5.removeSync(config.distDir);
     const srcDirFiles = globSync(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
-    const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev);
+    const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
-    await buildClientSideFiles([alpineDataFile], isDev);
+    await buildClientSideFiles([alpineDataFile], isDev2);
     fs5.removeSync(config.distTempFolder);
-    await buildCSS();
+    await buildCSS(disableTailwind2);
     await buildPublicFolderSymlinks();
-    if (!isDev) await buildFilesWithConfigs(componentData);
+    await buildOnLoadFile(componentData, isDev2);
+    if (!isDev2) await triggerXPineOnLoad();
+    if (!isDev2) await buildFilesWithConfigs(componentData);
+    if (!isDev2) context.clear();
   } catch (err) {
     console.error("Build failed");
     console.error(err);
   }
 }
-async function buildAppFiles(files, isDev) {
+async function buildAppFiles(files, isDev2) {
   const componentData = [];
   const dataFiles = [];
   const pageConfigFiles = files.filter((file) => {
@@ -372,12 +482,12 @@ async function buildAppFiles(files, isDev) {
     platform: "node",
     outdir: config.distDir,
     bundle: true,
-    sourcemap: isDev ? "inline" : false,
+    sourcemap: isDev2 ? "inline" : false,
     external: allPackages,
     jsx: "transform",
-    minify: !isDev,
+    minify: !isDev2,
     plugins: [
-      addDotJS(allPackages, extensions, isDev),
+      addDotJS(allPackages, extensions, isDev2),
       transformTSXFiles(componentData, pageConfigFiles),
       getDataFiles(dataFiles)
     ]
@@ -388,7 +498,7 @@ async function buildAppFiles(files, isDev) {
     dataFiles
   };
 }
-async function buildClientSideFiles(alpineDataFiles = [], isDev) {
+async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
   const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
   fs5.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
@@ -399,22 +509,22 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
     }
   );
   convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
-  if (isDev) writeDevServerClientSideCode(tempFilePath);
+  if (isDev2) writeDevServerClientSideCode(tempFilePath);
   writeSpaClientSideCode(tempFilePath);
   await build({
     entryPoints: [tempFilePath],
     bundle: true,
     outdir: config.distPublicScriptsDir,
-    minify: !isDev,
-    sourcemap: isDev ? "inline" : false
+    minify: !isDev2,
+    sourcemap: isDev2 ? "inline" : false
   });
   const pagesFiles = globSync(pagesScriptsGlob);
   await build({
     entryPoints: pagesFiles || [],
     bundle: true,
     outdir: config.distPublicScriptsDir + "/pages",
-    minify: !isDev,
-    sourcemap: isDev ? "inline" : false
+    minify: !isDev2,
+    sourcemap: isDev2 ? "inline" : false
   });
   await logSize(config.distPublicDir, "client");
 }
@@ -445,12 +555,7 @@ async function buildAlpineDataFile(componentData, dataFiles) {
   };
   const componentsAndDataFiles = componentData.concat(dataFiles);
   for (const component of componentsAndDataFiles) {
-    const sourceFile = ts3.createSourceFile(
-      component.path,
-      component.contents,
-      ts3.ScriptTarget.Latest
-    );
-    const dataFunctionResult = findDataAttributesAndFunctions(sourceFile, sourceFile);
+    const dataFunctionResult = findDataAttributesAndFunctions(component.source, component.source);
     dataFunctionResults.foundDataAttributes.push(...dataFunctionResult.foundDataAttributes);
     const foundFunctionsWithPath = dataFunctionResult.foundFunctions.map((item) => {
       return {
@@ -474,11 +579,11 @@ async function buildAlpineDataFile(componentData, dataFiles) {
   fs5.writeFileSync(config.alpineDataPath, result);
   return config.alpineDataPath;
 }
-async function buildCSS() {
+async function buildCSS(disableTailwind2) {
   const cssFiles = globSync(config.srcDir + "/**/*.css");
   for (const file of cssFiles) {
     const fileContents = fs5.readFileSync(file, "utf-8");
-    const result = await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
+    const result = disableTailwind2 ? fileContents : await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
     const newPath = file.replace(config.srcDir, config.distDir);
     fs5.ensureFileSync(newPath);
     fs5.writeFileSync(newPath, result.css);
@@ -540,6 +645,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
   }
   const componentDynamicPaths = getComponentDynamicPaths(componentFileName);
   const componentFn = componentImport.default;
+  if (componentImport?.onInit) await componentImport.onInit();
   const outputPath = componentDynamicPaths?.length ? componentDynamicPaths.reduce((total, current) => {
     return total.replace(`/[${current}]`, "");
   }, path5.dirname(builtComponentPath)) : path5.dirname(builtComponentPath);
@@ -589,9 +695,57 @@ function getComponentDynamicPaths(componentPath) {
   }
   return output;
 }
+async function buildOnLoadFile(componentData, isDev2) {
+  const onLoadFiles = [];
+  const onLoadFileResult = {
+    imports: "",
+    fn: ""
+  };
+  for (const component of componentData) {
+    if (component.contents.includes("xpineOnLoad")) {
+      onLoadFiles.push({
+        path: sourcePathToDistPath(component.path),
+        source: component.source
+      });
+    }
+  }
+  onLoadFiles.sort((a, b) => {
+    return a.path.localeCompare(b.path);
+  });
+  for (const file of onLoadFiles) {
+    const result = getXpineOnLoadFunction(file.path, file.source, onLoadFileResult);
+    onLoadFileResult.fn += result.fn;
+    onLoadFileResult.imports += result.imports;
+  }
+  const output = `
+    ${onLoadFileResult.imports}
+    import { context } from "xpine";
+    export default async function triggerOnLoad() {
+      ${onLoadFileResult.fn}
+      context.runArrayQueue();
+    }
+  `;
+  const onLoadFilePath = path5.join(config.distDir, "./__xpineOnLoad.ts");
+  fs5.writeFileSync(onLoadFilePath, output);
+  await build({
+    entryPoints: [onLoadFilePath],
+    format: "esm",
+    platform: "node",
+    outdir: config.distDir,
+    bundle: true,
+    sourcemap: isDev2 ? "inline" : false,
+    external: allPackages,
+    jsx: "transform",
+    minify: !isDev2,
+    plugins: [
+      addDotJS(allPackages, extensions, isDev2)
+    ]
+  });
+}
 
 // src/scripts/xpine-build.ts
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 var argv = yargs(hideBin(process.argv)).argv;
-buildApp(argv?.isDev || false, argv?.removePreviousBuild || false);
+var { isDev, removePreviousBuild, disableTailwind } = argv;
+buildApp({ isDev, removePreviousBuild, disableTailwind });