xpine 0.0.4 → 0.0.6

package/src/scripts/build.ts

@@ -1,274 +0,0 @@
-import path from 'path';
-import fs from 'fs-extra';
-import { build } from 'esbuild';
-import builtinModules from 'builtin-modules';
-import ts from 'typescript';
-import {
-  convertEntryPointsToSingleFile,
-  findDataAttributesAndFunctions,
-  removeClientScriptInTSXFile
-} from '../build/typescript-builder';
-import { globSync } from 'glob';
-import postcss from 'postcss';
-// @ts-ignore
-import tailwindPostcss from '@tailwindcss/postcss';
-import { config } from '../util/get-config';
-
-// Extensions to look for in the bundle
-const extensions = ['.ts', '.tsx'];
-const packageJson = JSON.parse(fs.readFileSync(config.packageJsonPath, 'utf-8'));
-const allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
-const allPackagesIncludingNode = allPackages.concat(builtinModules);
-
-export async function buildApp(isDev = false) {
-  try {
-    const srcDirFiles = globSync(config.srcDir + '/**/*.{js,ts,tsx,jsx}');
-    const { componentData, dataFiles, } = await buildAppFiles(srcDirFiles, isDev);
-    const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
-    await buildClientSideFiles([alpineDataFile], isDev);
-    fs.removeSync(config.distTempFolder);
-    await buildCSS();
-    await buildPublicFolderSymlinks();
-  } catch (err) {
-    console.error('Build failed');
-    console.error(err);
-  }
-}
-
-async function buildAppFiles(files: string[], isDev?: boolean) {
-  const componentData = [];
-  const dataFiles = [];
-  // Filter out client side files and files that aren't of the allowed extensions
-  const backendFiles = files
-    .filter((file) => extensions.find(ext => file.endsWith(ext)))
-    .filter((file) => !file.startsWith(config.publicDir));
-  fs.ensureDirSync(config.distDir);
-  // Build backend/SSR TSX modules
-  await build({
-    entryPoints: backendFiles,
-    format: 'esm',
-    platform: 'node',
-    outdir: config.distDir,
-    bundle: true,
-    sourcemap: isDev ? 'inline' : false,
-    external: allPackages,
-    jsx: 'transform',
-    minify: !isDev,
-    plugins: [
-      {
-        name: 'add-dot-js',
-        setup(build) {
-          build.onResolve({ filter: /.*/, }, args => {
-            const hasAtSign = args.path.startsWith('@');
-            const isPackage = hasAtSign ?
-              allPackagesIncludingNode.includes(args.path) :
-              allPackagesIncludingNode.includes(args.path.split('/').shift());
-            if (args.importer && !isPackage) {
-              // If we're doing an index import we need /index.js
-              const calculatedDir = path.join(args.resolveDir, args.path);
-              let existsAsFile = false;
-              for (const extension of extensions) {
-                const asFile = calculatedDir + extension;
-                const exists = fs.existsSync(asFile);
-                if (exists) existsAsFile = true;
-              }
-              let outputPath = args.path + (existsAsFile ? '' : '/index') + '.js';
-              outputPath = args.path.endsWith('.js') || args.path.endsWith('.mjs') ? args.path : outputPath;
-              return { path: outputPath, external: true, };
-            }
-          });
-        },
-      },
-      {
-        name: 'insert-html-banner-and-remove-client-scripts',
-        setup(build) {
-          build.onLoad({ filter: /.tsx/, }, args => {
-            const cleanedContent = removeClientScriptInTSXFile(args.path);
-            const htmlImportStart = 'import { html } from \'xpine\';\n';
-            const newContent = `${htmlImportStart}${cleanedContent.content}`;
-            componentData.push({
-              ...args,
-              contents: `${htmlImportStart}${cleanedContent.fullContent}`,
-              clientContent: cleanedContent.clientContent,
-            });
-            return {
-              contents: newContent,
-              loader: 'tsx',
-            };
-          });
-        },
-      },
-      {
-        name: 'get-data-files',
-        setup(build) {
-          build.onLoad({ filter: /\.data\.(js|mjs|ts)$/, }, args => {
-            const contents = fs.readFileSync(args.path, 'utf-8');
-            dataFiles.push({
-              ...args,
-              contents,
-            });
-            return {
-              contents,
-              loader: 'ts',
-            };
-          });
-        },
-      }
-    ],
-  });
-  await logSize(config.distDir, 'app');
-  return {
-    componentData,
-    dataFiles,
-  };
-}
-
-// Build client side files
-async function buildClientSideFiles(alpineDataFiles: string[] = [], isDev?: boolean) {
-  // Write the temp file to use
-  const tempFilePath = path.join(config.distTempFolder, './app.ts');
-  fs.ensureFileSync(tempFilePath);
-  // Get all ts/js files in public folder but ignore the pages scripts
-  const pagesScriptsGlob = config.publicDir + '/scripts/pages/**/*.{js,ts}';
-  const clientFiles = globSync(
-    config.publicDir + '/**/*.{js,ts}',
-    {
-      ignore: pagesScriptsGlob,
-    }
-  );
-  // Filter out all public/pages files
-  convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
-  // Write dev server code to the temp file path
-  if (isDev) writeDevServerClientSideCode(tempFilePath);
-  // Write spa functionality to the temp file path
-  writeSpaClientSideCode(tempFilePath);
-  await build({
-    entryPoints: [tempFilePath],
-    bundle: true,
-    outdir: config.distPublicScriptsDir,
-    minify: !isDev,
-    sourcemap: isDev ? 'inline' : false,
-  });
-  // Build pages files scripts
-  const pagesFiles = globSync(pagesScriptsGlob);
-  await build({
-    entryPoints: pagesFiles || [],
-    bundle: true,
-    outdir: config.distPublicScriptsDir + '/pages',
-    minify: !isDev,
-    sourcemap: isDev ? 'inline' : false,
-  });
-  await logSize(config.distPublicDir, 'client');
-}
-
-function writeDevServerClientSideCode(tempFilePath: string) {
-  const devServerPath = path.join(import.meta.dirname, '../static/dev-server.js');
-  const content = fs.readFileSync(devServerPath, 'utf-8');
-  fs.appendFileSync(tempFilePath, `\n` + content);
-}
-
-function writeSpaClientSideCode(tempFilePath: string) {
-  const spaPath = path.join(import.meta.dirname, '../static/spa.js');
-  const content = fs.readFileSync(spaPath, 'utf-8');
-  fs.appendFileSync(tempFilePath, `\n` + content);
-}
-
-async function buildAlpineDataFile(componentData: any[], dataFiles: any[]) {
-  const output = {
-    imports: [
-      'import Alpine from \'alpinejs\';'
-    ],
-    code: [],
-    end: [
-      'window.Alpine = Alpine;'
-    ],
-  };
-  const dataFunctionResults = {
-    foundDataAttributes: [],
-    foundFunctions: [],
-    foundImports: [],
-  };
-  const componentsAndDataFiles = componentData.concat(dataFiles);
-  for (const component of componentsAndDataFiles) {
-    // Single source file
-    const sourceFile = ts.createSourceFile(
-      component.path,
-      component.contents,
-      ts.ScriptTarget.Latest
-    );
-    const dataFunctionResult = findDataAttributesAndFunctions(sourceFile, sourceFile);
-    dataFunctionResults.foundDataAttributes.push(...dataFunctionResult.foundDataAttributes);
-    const foundFunctionsWithPath = dataFunctionResult.foundFunctions.map(item => {
-      return {
-        ...item,
-        path: component.path,
-        content: component.clientContent,
-      };
-    });
-    dataFunctionResults.foundFunctions.push(...foundFunctionsWithPath);
-  }
-  const validDataFunctions = dataFunctionResults.foundFunctions.filter(item => {
-    return dataFunctionResults.foundDataAttributes.includes(item.name) && item.content;
-  });
-  for (const dataFunction of validDataFunctions) {
-    if (!dataFunction.hasExport) continue;
-    output.code.push(dataFunction.content);
-    output.code.push(`Alpine.data('${dataFunction.name}', ${dataFunction.name});`);
-  }
-  const result = output.imports.join('\n') + '\n' + output.code.join('\n') + '\n' + output.end.join('\n');
-  fs.ensureFileSync(config.alpineDataPath);
-  fs.writeFileSync(config.alpineDataPath, result);
-  return config.alpineDataPath;
-}
-
-export async function buildCSS() {
-  const cssFiles = globSync(config.srcDir + '/**/*.css');
-  for (const file of cssFiles) {
-    const fileContents = fs.readFileSync(file, 'utf-8');
-    const result = await postcss([tailwindPostcss()]).process(fileContents, { from: file, });
-    // Write to dist folder
-    const newPath = file.replace(config.srcDir, config.distDir);
-    fs.ensureFileSync(newPath);
-    fs.writeFileSync(newPath, result.css);
-  }
-  logSize(config.distPublicDir, 'css');
-}
-
-// We need to symlink the non CSS or JS files from the src/public folder into the dist folder
-export async function buildPublicFolderSymlinks() {
-  const files = globSync(config.publicDir + '/**/*.*', {
-    ignore: '/**/*.{css,js,ts,tsx,jsx}',
-  });
-
-  // Create symlinks in dist directory
-  for (const file of files) {
-    try {
-      const newPath = file.replace(config.srcDir, config.distDir);
-      const splitNewPath = newPath.split('/');
-      splitNewPath.pop();
-      const newDir = splitNewPath.join('/');
-      fs.ensureDirSync(newDir);
-      fs.symlinkSync(file, newPath);
-    } catch { }
-  }
-}
-
-type FileItem = {
-  file: string;
-  size: number;
-}
-
-export async function logSize(pathName: string, type: 'app' | 'client' | 'css', validExtensions = ['.js', '.css']) {
-  const files = globSync(pathName + '/**/*' + (type === 'css' ? '.css' : ''));
-  const fileSizes = files.map((file) => {
-    if (!validExtensions.find(ext => file.endsWith(ext))) return false;
-    return {
-      file,
-      size: (fs.statSync(file).size) / (1024 * 1000),
-    };
-  }).filter(Boolean);
-  const totalSize = fileSizes.reduce((total, current: FileItem) => {
-    return current.size + total;
-  }, 0);
-  console.info(`[${totalSize.toFixed(3)} MB] Built ${type}`);
-}

package/src/scripts/xpine-build.ts

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-import { buildApp } from './build';
-
-buildApp();

package/src/scripts/xpine-dev.ts

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-import { runDevServer } from '../runDevServer';
-
-runDevServer();

package/src/static/dev-server.mjs

@@ -1,9 +0,0 @@
-const socketProtocol = 'ws:';
-const echoSocketUrl = socketProtocol + '//' + window.location.hostname + ':3001/dev-server/';
-const socket = new WebSocket(echoSocketUrl);
-
-socket.addEventListener('message', async (msg) => {
-  if (msg.data === 'refresh:client') {
-    window.location.reload();
-  }
-});

package/src/util/env.ts

@@ -1,7 +0,0 @@
-import dotenv from 'dotenv';
-import path from 'path';
-import { config } from './get-config';
-
-export function setupEnv() {
-  dotenv.config({ path: path.join(config.rootDir, `./.env.${process.env.STAGE || 'dev'}`),});
-}

package/src/util/get-config.ts

@@ -1,65 +0,0 @@
-import path from 'path';
-import require from './require';
-import { XPineConfig } from '../../types';
-
-const rootDir = process.cwd();
-
-export function fromRoot(pathName?: string) {
-  if (!pathName) return rootDir;
-  return path.join(rootDir, pathName);
-}
-
-const userConfig = require(path.join(process.cwd(), './xpine.config.mjs')).default;
-
-const 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 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');
-  },
-};
-
-export const config: XPineConfig = {
-  ...configDefaults,
-  ...userConfig,
-};

package/src/util/html.ts

@@ -1,32 +0,0 @@
-export class html {
-
-  static attributeObjectToString(props) {
-    if (!props) return '';
-    return Object.entries(props)
-      .filter(([, value]) => value !== null && value !== undefined)
-      .map(([key, value], index) => {
-        const start = index === 0 ? ' ' : '';
-        return `${start}${key}="${value}"`;
-      })
-      .join(' ');
-  }
-
-  static async fragment(props) {
-    const childrenResult = await Promise.all(props.children.flat());
-    return childrenResult.filter(Boolean).join('');
-  }
-
-  static async createElement(type, props, ...children) {
-    const childrenResult = await Promise.all(children.flat());
-    // Handle passing in another element
-    if (typeof type === 'function') {
-      const result = await type({ ...props, children: childrenResult, });
-      return result;
-    }
-    return `<${type}${this.attributeObjectToString(props)}>${childrenResult.filter(Boolean).join('')}</${type}>`;
-  }
-}
-
-export function JSXRuntime() {
-  return true;
-}

package/src/util/require.ts

@@ -1,5 +0,0 @@
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-export default require;