feat: remove node dependencies from compiler (#188)

.github/workflows/main.yml

@@ -19,9 +19,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 7.14.0
+          version: 9
 
       - name: Set node version to ${{ matrix.node_version }}
         uses: actions/setup-node@v3

packages/abell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abell",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Abell is a static-site-generator for JavaScript developers. Powered by Vite, It tries to stay close to fundamentals while providing a great DX",
   "bin": "./dist/bin.js",
   "main": "./dist/index.js",

packages/abell/src/index.ts

@@ -4,4 +4,3 @@ export { vitePluginAbell } from './vite-plugin-abell/index.js';
 export { defineConfig, makeRoutesFromGlobImport } from './utils/api.js';
 
 export { Route, AbellViteConfig } from './type-utils.js';
-export { evaluateAbellBlock } from './utils/internal-utils.js';

packages/abell/src/type-utils.ts

@@ -65,6 +65,13 @@ export type AbellOptions = {
    * E.g. if you want to use top-level await in entry.build.ts, you can set target here without having to change target of your final client bundle
    */
   serverBuild?: ViteUserConfig['build'];
+
+  /**
+   * Allows `.abell` files to be imported in client-side code.
+   *
+   * Abell variables like `Abell.root`, `__dirname`, `__filename` etc return empty string when this flag is set
+   */
+  experimentalAllowClientSide?: boolean;
 };
 
 export interface AbellViteConfig extends ViteUserConfig {

packages/abell/src/utils/__tests__/internal-utils.spec.ts

@@ -1,9 +1,6 @@
 import { test, describe, expect } from 'vitest';
-import {
-  getURLFromFilePath,
-  evaluateAbellBlock,
-  getFilePathFromURL
-} from '../internal-utils';
+import { getURLFromFilePath, getFilePathFromURL } from '../internal-utils';
+import { evaluateAbellBlock } from '../evaluateAbellBlock';
 import { BASE_PATH, prefix } from './test-utils';
 
 describe('getURLFromFilePath()', () => {

packages/abell/src/utils/evaluateAbellBlock.ts

@@ -0,0 +1,22 @@
+/**
+ * Evaluates the abell block.
+ *
+ * Internally used to clean the output and return correct value.
+ *
+ */
+export const evaluateAbellBlock = (val: unknown): string | boolean | number => {
+  if (val === undefined || val === null) return ''; // never print undefined or null
+  if (typeof val === 'function') return evaluateAbellBlock(val()); // if function, execute the function
+  if (Array.isArray(val)) return val.join(''); // if array, join the array with ''
+  if (typeof val === 'object') return JSON.stringify(val); // if object, stringify object
+  if (
+    typeof val === 'string' ||
+    typeof val === 'boolean' || // string, boolean, number can take care of stringifying at the end
+    typeof val === 'number'
+  ) {
+    return val;
+  }
+
+  // force stringification on rest
+  return String(val);
+};

packages/abell/src/utils/internal-utils.ts

@@ -408,26 +408,3 @@ export const addJStoBodyEnd = (
 
   return htmlContent + jsLinks;
 };
-
-/**
- * Evaluates the abell block.
- *
- * Internally used to clean the output and return correct value.
- *
- */
-export const evaluateAbellBlock = (val: unknown): string | boolean | number => {
-  if (val === undefined || val === null) return ''; // never print undefined or null
-  if (typeof val === 'function') return evaluateAbellBlock(val()); // if function, execute the function
-  if (Array.isArray(val)) return val.join(''); // if array, join the array with ''
-  if (typeof val === 'object') return JSON.stringify(val); // if object, stringify object
-  if (
-    typeof val === 'string' ||
-    typeof val === 'boolean' || // string, boolean, number can take care of stringifying at the end
-    typeof val === 'number'
-  ) {
-    return val;
-  }
-
-  // force stringification on rest
-  return String(val);
-};

packages/abell/src/vite-plugin-abell/compiler/compiler.spec.ts

@@ -36,21 +36,21 @@ describe('compile()', () => {
     });
     expect(js.trim().replace(`\\\\test.abell`, '/test.abell'))
       .toMatchInlineSnapshot(`
-      "import { default as _path } from 'path';
-        import { evaluateAbellBlock as e } from 'abell';
-        
-        const __filename = \\"/test.abell\\";
-        const __dirname = _path.dirname(__filename);
-        const root = _path.relative(__dirname, \\"/\\")
-        export const html = (props = {}) => {
-          const Abell = { props, __filename, __dirname };
+        "import { default as _path } from 'path';
+          import { evaluateAbellBlock as e } from 'abell/dist/utils/evaluateAbellBlock';
           
-          return \`
-          <nav>hello</nav>
-          \`
-        };
-        export default html;"
-    `);
+          const __filename = \\"/test.abell\\";
+          const __dirname = _path.dirname(__filename);
+          const root = _path.relative(__dirname, \\"/\\");
+          export const html = (props = {}) => {
+            const Abell = { props, __filename, __dirname };
+            
+            return \`
+            <nav>hello</nav>
+            \`
+          };
+          export default html;"
+      `);
   });
 
   test('should create first block as declaration block with declarations comment', () => {
@@ -94,30 +94,30 @@ describe('compile()', () => {
     });
     expect(js.trim().replace(`\\\\test.abell`, '/test.abell'))
       .toMatchInlineSnapshot(`
-      "import { default as _path } from 'path';
-        import { evaluateAbellBlock as e } from 'abell';
-        
-            import x from './x';
-          
-        const __filename = \\"/test.abell\\";
-        const __dirname = _path.dirname(__filename);
-        const root = _path.relative(__dirname, \\"/\\")
-        export const html = (props = {}) => {
-          const Abell = { props, __filename, __dirname };
-          
-            /** @declarations */
-            const x = 999;
-          
-          return \`
+        "import { default as _path } from 'path';
+          import { evaluateAbellBlock as e } from 'abell/dist/utils/evaluateAbellBlock';
           
+              import x from './x';
+            
+          const __filename = \\"/test.abell\\";
+          const __dirname = _path.dirname(__filename);
+          const root = _path.relative(__dirname, \\"/\\");
+          export const html = (props = {}) => {
+            const Abell = { props, __filename, __dirname };
+            
+              /** @declarations */
+              const x = 999;
+            
+            return \`
+            
 
-          <b>\${e( 3 + 4 )}</b>
-          
-          <nav>\${e( x * 2 )}</nav>
-          \`
-        };
-        export default html;"
-    `);
+            <b>\${e( 3 + 4 )}</b>
+            
+            <nav>\${e( x * 2 )}</nav>
+            \`
+          };
+          export default html;"
+      `);
   });
 
   test('should successfully compile with imports', () => {

packages/abell/src/vite-plugin-abell/compiler/compiler.ts

@@ -18,6 +18,7 @@ interface CompileOptions {
   filepath: string;
   cwd?: string;
   outputType?: 'js-string' | 'syntax-blocks';
+  isClientSide?: boolean;
 }
 
 interface HTMLOutputCompileOptions extends CompileOptions {
@@ -77,12 +78,20 @@ export function compile(
   }
 
   const jsOut = `
-  import { default as _path } from 'path';
-  import { evaluateAbellBlock as e } from 'abell';
+  ${options.isClientSide ? '' : `import { default as _path } from 'path';`}
+  import { evaluateAbellBlock as e } from 'abell/dist/utils/evaluateAbellBlock';
   ${importBlock.text}
-  const __filename = ${JSON.stringify(options.filepath)};
-  const __dirname = _path.dirname(__filename);
-  const root = _path.relative(__dirname, ${JSON.stringify(options.cwd)})
+  const __filename = ${
+    options.isClientSide ? '"";' : JSON.stringify(options.filepath)
+  };
+  const __dirname = ${
+    options.isClientSide ? '"";' : '_path.dirname(__filename);'
+  }
+  const root = ${
+    options.isClientSide
+      ? '"";'
+      : `_path.relative(__dirname, ${JSON.stringify(options.cwd)});`
+  }
   export const html = (props = {}) => {
     const Abell = { props, __filename, __dirname };
     ${declarationBlocks.text}

packages/abell/src/vite-plugin-abell/vite-plugin-abell.ts

@@ -29,7 +29,8 @@ export function vitePluginAbell(abellOptions?: AbellOptions): PluginOption {
       if (id.endsWith('.abell')) {
         const jsCode = compile(src, {
           filepath: id,
-          cwd: process.cwd()
+          cwd: process.cwd(),
+          isClientSide: abellOptions?.experimentalAllowClientSide ?? false
         });
         let outCode = jsCode;
         // If loader is not defined, skip the esbuild transform

playground/test-utils.ts

@@ -22,7 +22,8 @@ export async function run(
   return new Promise((resolve, reject) => {
     const child = spawn(windowsifyCommand('pnpm'), ['generate'], {
       cwd,
-      stdio
+      stdio,
+      shell: true
     });
     let terminalOutput = '';