puglite 1.0.0

package/README.md

@@ -0,0 +1,115 @@
+# Puglite
+
+A lightweight, streamlined version of the Pug template engine.
+
+## What is Puglite?
+
+Puglite is a refactored version of [Pug](https://github.com/pugjs/pug) with simplified features:
+- ✅ Clean whitespace-sensitive syntax
+- ✅ Tags, classes, IDs, attributes
+- ✅ Compile-time transformation
+- ❌ No logic flow (if/else, loops)
+- ❌ No mixins
+- ❌ No interpolation
+
+## Credits & Thanks
+
+**Puglite is built upon [Pug](https://pugjs.org).** All core parsing and compilation code comes from the excellent Pug project. We simply removed features to create a more focused template engine.
+
+Huge thanks to:
+- **TJ Holowaychuk** - Pug creator
+- **Forbes Lindesay** - Pug maintainer
+- **The Pug.js team and all contributors**
+
+Without their amazing work, Puglite wouldn't exist. ❤️
+
+Special thanks to **Adam Miller** for sponsoring the Claude Code usage that helped build Puglite.
+
+## Standalone Usage
+
+```js
+const puglite = require('puglite');
+
+const html = puglite.render('.container\n  h1 Hello\n  p World');
+// <div class="container"><h1>Hello</h1><p>World</p></div>
+```
+
+## Quick Start with Angular 18+
+
+### 1. Install
+```bash
+npm install -D puglite @angular-builders/custom-webpack
+```
+
+### 2. Update `angular.json`
+
+Use `puglite:browser` and `puglite:dev-server` builders:
+
+```json
+{
+  "architect": {
+    "build": {
+      "builder": "puglite:browser",
+      "options": {
+        "outputPath": "dist/my-app",
+        "index": "src/index.html",
+        "main": "src/main.ts",
+        "tsConfig": "tsconfig.app.json"
+      }
+    },
+    "serve": {
+      "builder": "puglite:dev-server",
+      "configurations": {
+        "development": {
+          "buildTarget": "my-app:build:development"
+        }
+      }
+    }
+  }
+}
+```
+
+**Important:** Puglite requires the **old Angular schema format** with `outputPath`, `index`, and `main`. The new Angular 17+ schema using `browser` instead of `main` is not supported because puglite uses webpack-based builds.
+
+### 3. Use `.pug` Templates
+```typescript
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.pug'
+})
+export class AppComponent {
+  title = 'My App';
+}
+```
+
+**app.component.pug:**
+```pug
+.container
+  h1 {{ title }}
+  p Welcome to Puglite!
+```
+
+## Supported Syntax
+
+See EXAMPLES.md
+
+## What's Different from Pug?
+
+Puglite **removes** these Pug features:
+- ❌ Logic: `if`, `else`, `unless`, `case`, `when`
+- ❌ Loops: `each`, `while`
+- ❌ Mixins: `mixin`, `+mixin()`
+- ❌ Interpolation: `#{}`, `!{}`
+
+## Why Custom Webpack?
+
+Angular 17+ uses esbuild for speed, but esbuild plugins run **after** template validation. Custom-webpack (1.5M downloads/month) uses webpack loaders that transform templates **before** Angular processes them - the only reliable way for compile-time template transformation.
+
+## License
+
+MIT
+
+## Links
+
+- **Pug**: [pugjs.org](https://pugjs.org) | [GitHub](https://github.com/pugjs/pug)
+- **Custom Webpack**: [GitHub](https://github.com/just-jeb/angular-builders)

package/angular-webpack/index.js

@@ -0,0 +1,27 @@
+/**
+ * Puglite Angular Webpack Integration
+ *
+ * Works with @angular-builders/custom-webpack.
+ * Export a function that merges pug loader into existing webpack config.
+ */
+
+const path = require('path');
+
+const loaderPath = path.resolve(__dirname, 'loader.js');
+
+const pugRule = {
+  test: /\.pug$/,
+  use: [{ loader: loaderPath }]
+};
+
+/**
+ * Merge function for @angular-builders/custom-webpack
+ * @param {object} config - Existing webpack configuration
+ * @returns {object} - Modified webpack configuration
+ */
+module.exports = (config) => {
+  config.module = config.module || {};
+  config.module.rules = config.module.rules || [];
+  config.module.rules.push(pugRule);
+  return config;
+};

package/angular-webpack/loader.js

@@ -0,0 +1,37 @@
+/**
+ * Webpack loader for Puglite templates
+ * Compiles .pug files to HTML at build time
+ */
+
+module.exports = function pugliteLoader(source) {
+  const filename = this.resourcePath;
+
+  try {
+    // Import puglite internal modules
+    const lex = require('../lib/lexer');
+    const parse = require('../lib/parser');
+    const generateCode = require('../lib/code-gen');
+    const stripComments = require('../lib/strip-comments');
+    const runtimeWrap = require('../lib/runtime-wrap');
+
+    // Compile: lex → parse → generate → wrap → execute
+    const tokens = lex(source, { filename });
+    const strippedTokens = stripComments(tokens, { filename });
+    const ast = parse(strippedTokens, { filename, src: source });
+    const js = generateCode(ast, {
+      compileDebug: false,
+      pretty: false,
+      inlineRuntimeFunctions: false,
+      templateName: 'template'
+    });
+    const templateFn = runtimeWrap(js);
+    const html = templateFn();
+
+    // Return as CommonJS module
+    return `module.exports = ${JSON.stringify(html)};`;
+
+  } catch (error) {
+    this.emitError(new Error(`Puglite compilation failed for ${filename}: ${error.message}`));
+    return `module.exports = "";`;
+  }
+};

package/builders/browser/index.js

@@ -0,0 +1,49 @@
+/**
+ * Puglite Browser Builder
+ *
+ * Wraps @angular-builders/custom-webpack browser builder and auto-injects
+ * the puglite webpack configuration for .pug template support.
+ */
+
+const path = require('path');
+const { createRequire } = require('module');
+const debug = require('util').debuglog('puglite');
+
+const projectRequire = createRequire(path.join(process.cwd(), 'package.json'));
+
+const loaderPath = path.resolve(__dirname, '../../angular-webpack/loader.js');
+
+const pugRule = {
+  test: /\.pug$/,
+  use: [{ loader: loaderPath }]
+};
+
+function buildBrowser(options, context) {
+  debug('buildBrowser() called');
+  const { getTransforms } = projectRequire('@angular-builders/custom-webpack');
+  const { executeBrowserBuilder } = projectRequire('@angular-devkit/build-angular');
+
+  const pugWebpackTransform = (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push(pugRule);
+    return config;
+  };
+
+  const transforms = getTransforms(options, context);
+  const originalWebpackTransform = transforms.webpackConfiguration;
+
+  transforms.webpackConfiguration = async (config) => {
+    let result = config;
+    if (originalWebpackTransform) {
+      result = await originalWebpackTransform(result);
+    }
+    return pugWebpackTransform(result);
+  };
+
+  return executeBrowserBuilder(options, context, transforms);
+}
+
+const { createBuilder } = projectRequire('@angular-devkit/architect');
+module.exports = createBuilder(buildBrowser);
+module.exports.default = module.exports;

package/builders/browser/schema.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Puglite Browser Builder",
+  "description": "Build browser application with Puglite template support",
+  "type": "object",
+  "properties": {
+    "outputPath": {
+      "type": "string",
+      "description": "The full path for the new output directory."
+    },
+    "index": {
+      "description": "Configures the generation of the application's HTML index.",
+      "oneOf": [
+        { "type": "string" },
+        {
+          "type": "object",
+          "properties": {
+            "input": { "type": "string" },
+            "output": { "type": "string", "default": "index.html" }
+          },
+          "required": ["input"]
+        }
+      ]
+    },
+    "main": {
+      "type": "string",
+      "description": "The full path for the main entry point to the app."
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The full path for the TypeScript configuration file."
+    },
+    "assets": {
+      "type": "array",
+      "description": "List of static application assets.",
+      "default": [],
+      "items": {
+        "oneOf": [
+          { "type": "string" },
+          {
+            "type": "object",
+            "properties": {
+              "glob": { "type": "string" },
+              "input": { "type": "string" },
+              "output": { "type": "string" },
+              "ignore": { "type": "array", "items": { "type": "string" } }
+            },
+            "required": ["glob", "input"]
+          }
+        ]
+      }
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "default": [],
+      "items": {
+        "oneOf": [
+          { "type": "string" },
+          {
+            "type": "object",
+            "properties": {
+              "input": { "type": "string" },
+              "bundleName": { "type": "string" },
+              "inject": { "type": "boolean", "default": true }
+            },
+            "required": ["input"]
+          }
+        ]
+      }
+    },
+    "scripts": {
+      "type": "array",
+      "description": "Global scripts to be included in the build.",
+      "default": []
+    },
+    "polyfills": {
+      "description": "Polyfills to be included in the build.",
+      "oneOf": [
+        { "type": "string" },
+        { "type": "array", "items": { "type": "string" } }
+      ]
+    },
+    "inlineStyleLanguage": {
+      "type": "string",
+      "description": "The stylesheet language to use for inline styles.",
+      "enum": ["css", "less", "sass", "scss"],
+      "default": "css"
+    },
+    "optimization": {
+      "description": "Enables optimization of the build output.",
+      "oneOf": [{ "type": "boolean" }, { "type": "object" }],
+      "default": true
+    },
+    "sourceMap": {
+      "description": "Output source maps for scripts and styles.",
+      "oneOf": [{ "type": "boolean" }, { "type": "object" }],
+      "default": false
+    },
+    "outputHashing": {
+      "type": "string",
+      "description": "Define the output filename cache-busting hashing mode.",
+      "enum": ["none", "all", "media", "bundles"],
+      "default": "none"
+    },
+    "extractLicenses": {
+      "type": "boolean",
+      "description": "Extract all licenses in a separate file.",
+      "default": true
+    },
+    "budgets": {
+      "type": "array",
+      "description": "Budget thresholds to ensure parts of your application stay within boundaries.",
+      "default": []
+    },
+    "aot": {
+      "type": "boolean",
+      "description": "Build using Ahead of Time compilation.",
+      "default": true
+    },
+    "progress": {
+      "type": "boolean",
+      "description": "Log progress to the console while building.",
+      "default": true
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Run build when files change.",
+      "default": false
+    },
+    "poll": {
+      "type": "number",
+      "description": "Enable and define the file watching poll time period in milliseconds."
+    }
+  },
+  "additionalProperties": true,
+  "required": ["outputPath", "index", "main", "tsConfig"]
+}

package/builders/dev-server/index.js

@@ -0,0 +1,48 @@
+/**
+ * Puglite Dev Server Builder
+ *
+ * Wraps Angular's dev server with pug template support.
+ */
+
+const path = require('path');
+const { createRequire } = require('module');
+const debug = require('util').debuglog('puglite');
+
+const projectRequire = createRequire(path.join(process.cwd(), 'package.json'));
+
+const loaderPath = path.resolve(__dirname, '../../angular-webpack/loader.js');
+
+const pugRule = {
+  test: /\.pug$/,
+  use: [{ loader: loaderPath }]
+};
+
+function serveBrowser(options, context) {
+  debug('serveBrowser() called');
+  const { getTransforms } = projectRequire('@angular-builders/custom-webpack');
+  const { executeDevServerBuilder } = projectRequire('@angular-devkit/build-angular');
+
+  const pugWebpackTransform = (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push(pugRule);
+    return config;
+  };
+
+  const transforms = getTransforms(options, context);
+  const originalWebpackTransform = transforms.webpackConfiguration;
+
+  transforms.webpackConfiguration = async (config) => {
+    let result = config;
+    if (originalWebpackTransform) {
+      result = await originalWebpackTransform(result);
+    }
+    return pugWebpackTransform(result);
+  };
+
+  return executeDevServerBuilder(options, context, transforms);
+}
+
+const { createBuilder } = projectRequire('@angular-devkit/architect');
+module.exports = createBuilder(serveBrowser);
+module.exports.default = module.exports;

package/builders/dev-server/schema.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Puglite Dev Server Builder",
+  "description": "Development server with Puglite template support",
+  "type": "object",
+  "properties": {
+    "buildTarget": {
+      "type": "string",
+      "description": "A build builder target to serve in the format of `project:target[:configuration]`.",
+      "pattern": "^[^:\\s]*:[^:\\s]*(:[^\\s]+)?$"
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 4200
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    },
+    "proxyConfig": {
+      "type": "string",
+      "description": "Proxy configuration file."
+    },
+    "ssl": {
+      "type": "boolean",
+      "description": "Serve using HTTPS.",
+      "default": false
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "SSL certificate to use for serving HTTPS."
+    },
+    "headers": {
+      "type": "object",
+      "description": "Custom HTTP headers to be added to all responses.",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Opens the url in default browser.",
+      "default": false,
+      "alias": "o"
+    },
+    "verbose": {
+      "type": "boolean",
+      "description": "Adds more details to output logging."
+    },
+    "liveReload": {
+      "type": "boolean",
+      "description": "Whether to reload the page on change, using live-reload.",
+      "default": true
+    },
+    "publicHost": {
+      "type": "string",
+      "description": "The URL that the browser client should use to connect to the development server."
+    },
+    "allowedHosts": {
+      "type": "array",
+      "description": "List of hosts that are allowed to access the dev server.",
+      "default": [],
+      "items": {
+        "type": "string"
+      }
+    },
+    "servePath": {
+      "type": "string",
+      "description": "The pathname where the application will be served."
+    },
+    "disableHostCheck": {
+      "type": "boolean",
+      "description": "Don't verify connected clients are part of allowed hosts.",
+      "default": false
+    },
+    "hmr": {
+      "type": "boolean",
+      "description": "Enable hot module replacement."
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Rebuild on change.",
+      "default": true
+    },
+    "poll": {
+      "type": "number",
+      "description": "Enable and define the file watching poll time period in milliseconds."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["buildTarget"]
+}

package/builders/karma/README.md

@@ -0,0 +1,82 @@
+# Puglite Karma Test Builder
+
+Karma test runner with Puglite (`.pug`) template support for Angular projects.
+
+## Usage
+
+Update your `angular.json` to use the puglite karma builder:
+
+```json
+{
+  "projects": {
+    "your-project": {
+      "architect": {
+        "test": {
+          "builder": "puglite:karma",
+          "options": {
+            "karmaConfig": "karma.conf.js",
+            "main": "src/test.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Features
+
+- ✅ Automatic `.pug` template loading via webpack
+- ✅ Works with existing Karma configuration
+- ✅ Full Angular CLI test options support
+- ✅ Code coverage support
+- ✅ Watch mode support
+
+## How It Works
+
+The builder wraps Angular's standard Karma builder and injects webpack configuration to handle `.pug` templates using the puglite loader. This allows you to:
+
+1. Use `.pug` files as Angular component templates
+2. Run unit tests with Karma/Jasmine
+3. Test components that use `.pug` templates
+
+## Example Component
+
+```typescript
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.pug',
+  styleUrls: ['./example.component.scss']
+})
+export class ExampleComponent {}
+```
+
+```pug
+// example.component.pug
+.container
+  h1 Hello World
+  p This is a pug template
+```
+
+## Running Tests
+
+```bash
+ng test
+```
+
+Or with code coverage:
+
+```bash
+ng test --code-coverage
+```
+
+## Requirements
+
+- Angular 18+
+- Karma
+- `@angular-builders/custom-webpack` (peer dependency)

package/builders/karma/index.js

@@ -0,0 +1,40 @@
+/**
+ * Puglite Karma Test Builder
+ *
+ * Wraps Angular's Karma test runner with pug template support.
+ * Follows @angular-builders/custom-webpack karma pattern.
+ */
+
+const path = require('path');
+const { createRequire } = require('module');
+const debug = require('util').debuglog('puglite');
+
+const projectRequire = createRequire(path.join(process.cwd(), 'package.json'));
+
+const loaderPath = path.resolve(__dirname, '../../angular-webpack/loader.js');
+
+const pugRule = {
+  test: /\.pug$/,
+  use: [{ loader: loaderPath }]
+};
+
+const buildKarma = (options, context) => {
+  debug('buildKarma() called');
+  const { executeKarmaBuilder } = projectRequire('@angular-devkit/build-angular');
+
+  const pugWebpackTransform = (config) => {
+    debug('applying pug webpack transform, rules: %d', (config.module?.rules?.length || 0));
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push(pugRule);
+    return config;
+  };
+
+  return executeKarmaBuilder(options, context, {
+    webpackConfiguration: pugWebpackTransform
+  });
+};
+
+const { createBuilder } = projectRequire('@angular-devkit/architect');
+module.exports = createBuilder(buildKarma);
+module.exports.default = module.exports;