ng-js-vite 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Max Flores
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# ng-js-vite
+
+Vite plugin for AngularJS apps that keeps external component templates working after build.
+
+It finds a component `templateUrl`, copies that HTML template into the final build, gives it a content hash, and rewrites the URL so AngularJS can load it in production.
+
+If the same component also has a `styleUrl`, the CSS is inlined into the emitted template:
+
+```html
+<style data-ng-js-vite>
+/* component css */
+</style>
+
+<!-- component html -->
+```
+
+## Example
+
+```js
+import angular from "angular"
+
+const appRootComponent = {
+  templateUrl: "./app-root.html",
+  styleUrl: "./app-root.css",
+  controller: AppRootController,
+}
+
+angular.module("app").component("appRoot", appRootComponent)
+```
+
+`styleUrl` is a plugin-only property. AngularJS does not load it by itself; `ng-js-vite` reads it at build time, inlines the CSS into the emitted template, and removes the original `styleUrl` from the compiled component.
+
+With the default config, the template is emitted as something like:
+
+```txt
+templates/app-root-a1b2c3d4.html
+```
+
+And the compiled component points AngularJS to that generated file.
+
+## Install
+
+```bash
+bun add ng-js-vite
+# or
+npm install ng-js-vite
+```
+
+Requires `vite@^8` and `typescript@^5`.
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite"
+import { ngJsTemplateParser } from "ng-js-vite"
+
+export default defineConfig({
+  plugins: [ngJsTemplateParser()],
+})
+```
+
+## File Scope
+
+For now, this plugin supports **one `templateUrl` per source file**.
+
+If a `styleUrl` exists in that same file, it is paired with that template and inlined into it.
+
+Recommended component shape:
+
+```txt
+app-root.component.js
+app-root.component.html
+app-root.component.css
+```
+
+The same pattern works with TypeScript. Avoid putting multiple components with different `templateUrl` values in the same `.js` or `.ts` file. Split them into separate files instead.
+
+## TypeScript
+
+`styleUrl` is not part of AngularJS' built-in `IComponentOptions` type, so TypeScript will complain if you add it to a typed component definition.
+
+Add a project-level `.d.ts` file:
+
+```ts
+import "angular"
+
+declare module "angular" {
+  interface IComponentOptions {
+    styleUrl?: string
+  }
+}
+```
+
+Make sure that `.d.ts` file is included by your `tsconfig.json`. After that, `styleUrl` can be used directly in AngularJS component options:
+
+```ts
+import type { IComponentOptions } from "angular"
+
+export const appRootComponent: IComponentOptions = {
+  templateUrl: "./app-root.html",
+  styleUrl: "./app-root.css",
+  controller: AppRootController,
+}
+```
+
+## Options
+
+| Option   | Type      | Default | Description |
+| -------- | --------- | ------- | ----------- |
+| `hashed` | `boolean` | `true`  | Adds a content hash to emitted template filenames. |
+
+```ts
+ngJsTemplateParser({ hashed: false })
+```
+
+When `hashed` is disabled, templates are emitted with their original filename:
+
+```txt
+templates/app-root.html
+```
+
+## Base Path
+
+Generated template URLs respect Vite's `base` option.
+
+If your app uses routes, keep a base tag in `index.html` so AngularJS resolves template URLs from the app root:
+
+```html
+<base href="/">
+```
+
+## Roadmap
+
+Future versions are expected to support runtime CSS isolation, so each `templateUrl` can keep its inlined `styleUrl` styles scoped to that component template.

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+
+type NgJsTemplateParserOptions = {
+    hashed?: boolean;
+};
+declare function ngJsTemplateParser(params?: NgJsTemplateParserOptions): Plugin;
+
+export { ngJsTemplateParser };

package/dist/index.js

@@ -0,0 +1,238 @@
+// index.ts
+import "vite";
+
+// src/utils/is-valid-files.ts
+function isValidFiles(filename) {
+  if (filename.includes("node_modules")) return;
+  const regExp = /\.(ts|js)(\?.*)?$/;
+  return regExp.test(filename);
+}
+
+// src/utils/obtain-template-url.ts
+var regex = /templateUrl\s*:\s*(['"])(.*?)\1/;
+function obtainTemplateUrl(code) {
+  if (!code.includes("templateUrl")) return;
+  const match = code.match(regex);
+  if (!match) return;
+  const [, , templateUrl] = match;
+  if (templateUrl === void 0) return;
+  return { templateUrl };
+}
+
+// src/utils/obtain-style-url.ts
+var regex2 = /styleUrl\s*:\s*(['"])(.*?)\1/;
+function obtainStyleUrl(code) {
+  if (!code.includes("styleUrl")) return;
+  const match = code.match(regex2);
+  if (!match) return;
+  const [fullMatch, , styleUrl] = match;
+  if (styleUrl === void 0) return;
+  return { styleUrl, match: fullMatch };
+}
+
+// src/utils/hash-name.ts
+import { createHash } from "crypto";
+function createHashedName(name, content) {
+  const hash = createHash("sha256");
+  const hashStr = hash.update(content).digest("hex").slice(0, 8);
+  const extensionIndex = name.lastIndexOf(".");
+  const base = name.slice(0, extensionIndex);
+  const extension = name.slice(extensionIndex);
+  return {
+    key: hashStr,
+    value: `${base}-${hashStr}${extension}`
+  };
+}
+
+// index.ts
+import path2 from "path";
+import { readFileSync } from "fs";
+import { readFile } from "fs/promises";
+
+// src/utils/resolve-template-path.ts
+import path from "path";
+function resolveTemplatePath(root, id, templateUrl) {
+  if (templateUrl.startsWith("/")) {
+    return path.resolve(root, templateUrl.slice(1));
+  }
+  if (templateUrl.startsWith("./") || templateUrl.startsWith("../")) {
+    return path.resolve(path.dirname(id), templateUrl);
+  }
+  if (templateUrl.startsWith("src/")) {
+    return path.resolve(root, templateUrl);
+  }
+  return path.resolve(path.dirname(id), templateUrl);
+}
+
+// index.ts
+var DEFAULT_OPTIONS = {
+  hashed: true
+};
+function ngJsTemplateParser(params) {
+  const templates = /* @__PURE__ */ new Map();
+  const options = {
+    ...DEFAULT_OPTIONS,
+    ...params
+  };
+  let base = "/";
+  const root = process.cwd();
+  return {
+    name: "ngJsTemplateParser",
+    configResolved(config) {
+      base = config.base.endsWith("/") ? config.base : `${config.base}/`;
+    },
+    async transform(code, id) {
+      if (!isValidFiles(id)) return;
+      const templateObj = obtainTemplateUrl(code);
+      if (!templateObj) return;
+      const styleObj = obtainStyleUrl(code);
+      let transformedCode = code;
+      const { templateUrl } = templateObj;
+      const templatePath = resolveTemplatePath(
+        root,
+        id,
+        templateUrl
+      );
+      const stylePath = styleObj ? resolveTemplatePath(root, id, styleObj.styleUrl) : void 0;
+      const source = await readTemplateWithInlineStyle.call(
+        this,
+        templateUrl,
+        templatePath,
+        id,
+        styleObj?.styleUrl,
+        stylePath
+      );
+      const defaultName = path2.basename(templatePath);
+      const hashed = createHashedName(
+        defaultName,
+        source
+      );
+      templates.set(templatePath, {
+        defaultName,
+        hashedName: hashed.value,
+        dir: path2.dirname(templatePath),
+        sourceId: id,
+        stylePath
+      });
+      const outputName = options.hashed ? hashed.value : defaultName;
+      const publicUrl = `${base}templates/${outputName}`;
+      transformedCode = transformedCode.replace(templateUrl, publicUrl);
+      if (styleObj) {
+        transformedCode = transformedCode.replace(styleObj.match, "ngJsViteInlineStyle: true");
+      }
+      return {
+        code: transformedCode,
+        map: null
+      };
+    },
+    async generateBundle() {
+      const emitted = /* @__PURE__ */ new Set();
+      for (const template of templates.values()) {
+        let fileName = options.hashed ? template.hashedName : template.defaultName;
+        fileName = fileName.replace(/^\/+/, "");
+        const outputPath = path2.join("templates", fileName);
+        if (emitted.has(outputPath)) {
+          this.warn(
+            `ngJsTemplateParser: two templates resolve to "${outputPath}" - skipping the one referenced from "${template.sourceId}". Hashed filenames are unique by design; with "hashed: false" templates that share a basename collide. Rename one of them or enable hashing.`
+          );
+          continue;
+        }
+        const sourcePath = path2.join(
+          template.dir,
+          template.defaultName
+        );
+        const source = await readTemplateWithInlineStyle.call(
+          this,
+          sourcePath,
+          sourcePath,
+          template.sourceId,
+          template.stylePath,
+          template.stylePath
+        );
+        emitted.add(outputPath);
+        this.emitFile({
+          type: "asset",
+          fileName: outputPath,
+          source
+        });
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url;
+        if (!url) return next();
+        let pathname = new URL(url, "http://ng-js-vite.local").pathname.replace(/^\/+/, "");
+        const normalizedBase = base.replace(/^\/+|\/+$/g, "");
+        if (normalizedBase && pathname.startsWith(`${normalizedBase}/`)) {
+          pathname = pathname.slice(normalizedBase.length + 1);
+        }
+        const template = [...templates.values()].find(
+          (template2) => getTemplateRequestPath(template2, options.hashed ?? true) === pathname
+        );
+        if (!template) return next();
+        try {
+          const filePath = path2.join(
+            template.dir,
+            template.defaultName
+          );
+          const source = readTemplateWithInlineStyleSync(
+            filePath,
+            template.stylePath
+          );
+          res.statusCode = 200;
+          res.setHeader(
+            "Content-Type",
+            "text/html; charset=utf-8"
+          );
+          res.end(source);
+        } catch (error) {
+          next(error);
+        }
+      });
+    }
+  };
+}
+async function readTemplateWithInlineStyle(templateUrl, templatePath, sourceId, styleUrl, stylePath) {
+  let template;
+  try {
+    template = await readFile(templatePath);
+  } catch (error) {
+    this.error(
+      `ngJsTemplateParser: could not read template "${templateUrl}" (resolved to "${templatePath}") referenced from "${sourceId}": ${error.message}`
+    );
+  }
+  if (!stylePath) return template;
+  let style;
+  try {
+    style = await readFile(stylePath);
+  } catch (error) {
+    this.error(
+      `ngJsTemplateParser: could not read style "${styleUrl}" (resolved to "${stylePath}") referenced from "${sourceId}": ${error.message}`
+    );
+  }
+  return inlineStyle(template, style);
+}
+function readTemplateWithInlineStyleSync(templatePath, stylePath) {
+  const template = readFileSync(templatePath);
+  if (!stylePath) return template;
+  const style = readFileSync(stylePath);
+  return inlineStyle(template, style);
+}
+function inlineStyle(template, style) {
+  return Buffer.concat([
+    Buffer.from(`<style data-ng-js-vite>
+`),
+    style,
+    Buffer.from(`
+</style>
+`),
+    template
+  ]);
+}
+function getTemplateRequestPath(template, hashedFiles) {
+  const fileName = hashedFiles ? template.hashedName : template.defaultName;
+  return `templates/${fileName}`;
+}
+export {
+  ngJsTemplateParser
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "ng-js-vite",
+  "version": "0.1.0",
+  "description": "Vite plugin that emits content-hashed AngularJS templates and inlines styleUrl CSS.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "author": "Max Flores",
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "angularjs",
+    "templateUrl",
+    "styleUrl"
+  ],
+  "devDependencies": {
+    "@types/bun": "latest",
+    "tsup": "^8.5.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "bun test",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "typescript": "^5",
+    "vite": "^8.2.2"
+  }
+}