@embroider/vite 0.0.1-unstable.2c0e2bd

package/.eslintignore

@@ -0,0 +1,11 @@
+# compiled output
+/src/**/*.js
+/src/**/*.d.ts
+
+# shims
+/index.d.ts
+/index.mjs
+
+# dependencies
+/node_modules/
+

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './src/resolver.js';
+export * from './src/hbs.js';
+export * from './src/scripts.js';
+export * from './src/template-tag.js';
+export * from './src/addons.js';

package/index.mjs

@@ -0,0 +1,5 @@
+export * from './src/resolver.js';
+export * from './src/hbs.js';
+export * from './src/scripts.js';
+export * from './src/template-tag.js';
+export * from './src/addons.js';

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@embroider/vite",
+  "version": "0.0.1-unstable.2c0e2bd",
+  "main": "index.mjs",
+  "peerDependencies": {
+    "@embroider/core": "3.1.4-unstable.2c0e2bd",
+    "vite": "^4.3.9"
+  },
+  "dependencies": {
+    "@rollup/pluginutils": "^4.1.1",
+    "assert-never": "^1.2.1",
+    "content-tag": "^1.0.0",
+    "debug": "^4.3.2",
+    "fs-extra": "^10.0.0",
+    "jsdom": "^16.6.0",
+    "source-map-url": "^0.4.1",
+    "terser": "^5.7.0"
+  },
+  "devDependencies": {
+    "@embroider/core": "3.1.4-unstable.2c0e2bd",
+    "@types/debug": "^4.1.5",
+    "@types/jsdom": "^16.2.11",
+    "@types/fs-extra": "^9.0.12",
+    "rollup": "^3.23.0",
+    "vite": "^4.3.9"
+  }
+}

package/src/addons.ts

@@ -0,0 +1,20 @@
+import { ResolverLoader, packageName } from '@embroider/core';
+
+export function addons(root: string): string[] {
+  let rloader = new ResolverLoader(root);
+  let { options } = rloader.resolver;
+  let names = new Set<string>();
+  for (let from of Object.keys(options.renameModules)) {
+    let pName = packageName(from);
+    if (pName) {
+      names.add(pName);
+    }
+  }
+  for (let from of Object.keys(options.renamePackages)) {
+    names.add(from);
+  }
+  for (let name of Object.keys(options.activeAddons)) {
+    names.add(name);
+  }
+  return [...names];
+}

package/src/hbs.ts

@@ -0,0 +1,129 @@
+// TODO: I copied this from @embroider/addon-dev, it needs to be its own package
+// (or be in shared-internals or core)
+import { createFilter } from '@rollup/pluginutils';
+import type { PluginContext, ResolvedId } from 'rollup';
+import type { Plugin } from 'vite';
+import { readFileSync } from 'fs';
+import { hbsToJS } from '@embroider/core';
+import assertNever from 'assert-never';
+import { parse as pathParse } from 'path';
+import makeDebug from 'debug';
+
+const debug = makeDebug('embroider:hbs-plugin');
+
+export function hbs(): Plugin {
+  return {
+    name: 'rollup-hbs-plugin',
+    enforce: 'pre',
+    async resolveId(source: string, importer: string | undefined) {
+      let resolution = await this.resolve(source, importer, {
+        skipSelf: true,
+      });
+
+      if (!resolution) {
+        return maybeSynthesizeComponentJS(this, source, importer);
+      } else {
+        return maybeRewriteHBS(resolution);
+      }
+    },
+
+    load(id: string) {
+      const meta = getMeta(this, id);
+      if (!meta) {
+        return;
+      }
+
+      switch (meta.type) {
+        case 'template':
+          let input = readFileSync(id, 'utf8');
+          let code = hbsToJS(input);
+          return {
+            code,
+          };
+        case 'template-only-component-js':
+          return {
+            code: templateOnlyComponent,
+          };
+        default:
+          assertNever(meta);
+      }
+    },
+  };
+}
+
+const templateOnlyComponent =
+  `import templateOnly from '@ember/component/template-only';\n` + `export default templateOnly();\n`;
+
+type Meta =
+  | {
+      type: 'template';
+    }
+  | {
+      type: 'template-only-component-js';
+    };
+
+function getMeta(context: PluginContext, id: string): Meta | null {
+  const meta = context.getModuleInfo(id)?.meta?.['rollup-hbs-plugin'];
+  if (meta) {
+    return meta as Meta;
+  } else {
+    return null;
+  }
+}
+
+function correspondingTemplate(filename: string): string {
+  let { ext } = pathParse(filename);
+  return filename.slice(0, filename.length - ext.length) + '.hbs';
+}
+
+async function maybeSynthesizeComponentJS(context: PluginContext, source: string, importer: string | undefined) {
+  debug(`checking for template-only component: %s`, source);
+  let templateResolution = await context.resolve(correspondingTemplate(source), importer, {
+    skipSelf: true,
+    custom: {
+      embroider: {
+        // we don't want to recurse into the whole embroider compatbility
+        // resolver here. It has presumably already steered our request to the
+        // correct place. All we want to do is slightly modify the request we
+        // were given (changing the extension) and check if that would resolve
+        // instead.
+        //
+        // Currently this guard is only actually exercised in rollup, not in
+        // vite, due to https://github.com/vitejs/vite/issues/13852
+        enableCustomResolver: false,
+      },
+    },
+  });
+  if (!templateResolution) {
+    return null;
+  }
+  debug(`emitting template only component: %s`, templateResolution.id);
+
+  // we're trying to resolve a JS module but only the corresponding HBS
+  // file exists. Synthesize the template-only component JS.
+  return {
+    id: templateResolution.id.replace(/\.hbs$/, '.js'),
+    meta: {
+      'rollup-hbs-plugin': {
+        type: 'template-only-component-js',
+      },
+    },
+  };
+}
+
+const hbsFilter = createFilter('**/*.hbs');
+
+function maybeRewriteHBS(resolution: ResolvedId) {
+  if (!hbsFilter(resolution.id)) {
+    return null;
+  }
+  debug('emitting hbs rewrite: %s', resolution.id);
+  return {
+    ...resolution,
+    meta: {
+      'rollup-hbs-plugin': {
+        type: 'template',
+      },
+    },
+  };
+}

package/src/request.ts

@@ -0,0 +1,55 @@
+import { ModuleRequest, cleanUrl } from '@embroider/core';
+
+export const virtualPrefix = 'embroider_virtual:';
+
+export class RollupModuleRequest implements ModuleRequest {
+  static from(
+    source: string,
+    importer: string | undefined,
+    custom: Record<string, any> | undefined
+  ): RollupModuleRequest | undefined {
+    if (!(custom?.embroider?.enableCustomResolver ?? true)) {
+      return;
+    }
+
+    if (source && importer && source[0] !== '\0') {
+      let nonVirtual: string;
+      if (importer.startsWith(virtualPrefix)) {
+        nonVirtual = importer.slice(virtualPrefix.length);
+      } else {
+        nonVirtual = importer;
+      }
+
+      // strip query params off the importer
+      let fromFile = cleanUrl(nonVirtual);
+      return new RollupModuleRequest(source, fromFile, custom?.embroider?.meta);
+    }
+  }
+
+  private constructor(
+    readonly specifier: string,
+    readonly fromFile: string,
+    readonly meta: Record<string, any> | undefined
+  ) {}
+
+  get isVirtual(): boolean {
+    return this.specifier.startsWith(virtualPrefix);
+  }
+
+  alias(newSpecifier: string) {
+    return new RollupModuleRequest(newSpecifier, this.fromFile, this.meta) as this;
+  }
+  rehome(newFromFile: string) {
+    if (this.fromFile === newFromFile) {
+      return this;
+    } else {
+      return new RollupModuleRequest(this.specifier, newFromFile, this.meta) as this;
+    }
+  }
+  virtualize(filename: string) {
+    return new RollupModuleRequest(virtualPrefix + filename, this.fromFile, this.meta) as this;
+  }
+  withMeta(meta: Record<string, any> | undefined): this {
+    return new RollupModuleRequest(this.specifier, this.fromFile, meta) as this;
+  }
+}

package/src/resolver.ts

@@ -0,0 +1,69 @@
+import type { PluginContext, ResolveIdResult } from 'rollup';
+import { Plugin } from 'vite';
+import { join } from 'path';
+import {
+  Resolution,
+  Resolver,
+  ResolverFunction,
+  ResolverOptions,
+  locateEmbroiderWorkingDir,
+  virtualContent,
+} from '@embroider/core';
+import { readJSONSync } from 'fs-extra';
+import { RollupModuleRequest, virtualPrefix } from './request';
+import assertNever from 'assert-never';
+
+export function resolver(): Plugin {
+  let resolverOptions: ResolverOptions = readJSONSync(join(locateEmbroiderWorkingDir(process.cwd()), 'resolver.json'));
+  let resolver = new Resolver(resolverOptions);
+
+  return {
+    name: 'embroider-resolver',
+    enforce: 'pre',
+    async resolveId(source, importer, options) {
+      let request = RollupModuleRequest.from(source, importer, options.custom);
+      if (!request) {
+        // fallthrough to other rollup plugins
+        return null;
+      }
+      let resolution = await resolver.resolve(request, defaultResolve(this));
+      switch (resolution.type) {
+        case 'found':
+          return resolution.result;
+        case 'not_found':
+          return null;
+        default:
+          throw assertNever(resolution);
+      }
+    },
+    load(id) {
+      if (id.startsWith(virtualPrefix)) {
+        return virtualContent(id.slice(virtualPrefix.length), resolver);
+      }
+    },
+  };
+}
+
+function defaultResolve(context: PluginContext): ResolverFunction<RollupModuleRequest, Resolution<ResolveIdResult>> {
+  return async (request: RollupModuleRequest) => {
+    if (request.isVirtual) {
+      return {
+        type: 'found',
+        result: { id: request.specifier, resolvedBy: request.fromFile },
+      };
+    }
+    let result = await context.resolve(request.specifier, request.fromFile, {
+      skipSelf: true,
+      custom: {
+        embroider: {
+          meta: request.meta,
+        },
+      },
+    });
+    if (result) {
+      return { type: 'found', result };
+    } else {
+      return { type: 'not_found', err: undefined };
+    }
+  };
+}

package/src/scripts.ts

@@ -0,0 +1,136 @@
+import type { Plugin } from 'vite';
+import type { EmittedFile } from 'rollup';
+import { JSDOM } from 'jsdom';
+import { readFileSync, readJSONSync } from 'fs-extra';
+import { dirname, posix, resolve } from 'path';
+
+// This is a type-only import, so it gets compiled away. At runtime, we load
+// terser lazily so it's only loaded for production builds that use it. Don't
+// add any non-type-only imports here.
+import type { MinifyOptions } from 'terser';
+
+const defaults = ['/assets/vendor.js', '/assets/test-support.js'];
+
+export function scripts(params?: { include?: string[]; exclude?: string[] }): Plugin {
+  let optimizer: ScriptOptimizer;
+
+  // configured names are always interpreted as origin-absolute URLs.
+  let names = (params?.include ?? defaults)
+    .filter(name => !params?.exclude?.includes(name))
+    .map(name => {
+      if (name.startsWith('/')) {
+        return name;
+      } else {
+        return '/' + name;
+      }
+    });
+
+  return {
+    name: 'embroider-scripts',
+    enforce: 'pre',
+
+    configResolved(resolvedConfig) {
+      optimizer = new ScriptOptimizer(resolvedConfig.root);
+    },
+
+    async generateBundle() {
+      // this hook only runs in `vite build`
+      for (let name of names) {
+        for (let file of await optimizer.optimizedScript(name)) {
+          this.emitFile(file);
+        }
+      }
+    },
+
+    transformIndexHtml(htmlIn, context) {
+      // we don't do anything in `vite dev`, we only need to work in `vite
+      // build`
+      if (!context.server) {
+        return optimizer.transformHTML(htmlIn);
+      }
+    },
+  };
+}
+
+class ScriptOptimizer {
+  private emitted = new Map<string, string>();
+  private transformState:
+    | {
+        htmlIn: string;
+        htmlOut: string;
+        parsed: JSDOM;
+      }
+    | undefined;
+
+  constructor(private rootDir: string) {}
+
+  async optimizedScript(script: string): Promise<EmittedFile[]> {
+    // loading these lazily here so they never load in non-production builds.
+    // The node cache will ensures we only load them once.
+    const [Terser, srcURL] = await Promise.all([import('terser'), import('source-map-url')]);
+
+    let inCode = readFileSync(resolve(this.rootDir, script.slice(1)), 'utf8');
+    let terserOpts: MinifyOptions = {};
+    let fileRelativeSourceMapURL;
+    let appRelativeSourceMapURL;
+    if (srcURL.default.existsIn(inCode)) {
+      fileRelativeSourceMapURL = srcURL.default.getFrom(inCode)!;
+      appRelativeSourceMapURL = posix.join(dirname(script.slice(1)), fileRelativeSourceMapURL);
+      let content;
+      try {
+        content = readJSONSync(resolve(this.rootDir, appRelativeSourceMapURL));
+      } catch (err) {
+        // the script refers to a sourcemap that doesn't exist, so we just leave
+        // the map out.
+      }
+      if (content) {
+        terserOpts.sourceMap = { content, url: fileRelativeSourceMapURL };
+      }
+    }
+    let { code: outCode, map: outMap } = await Terser.default.minify(inCode, terserOpts);
+    let finalFilename = await this.getFingerprintedFilename(script, outCode!);
+    let emit: EmittedFile[] = [];
+    emit.push({
+      type: 'asset',
+      fileName: finalFilename.slice(1),
+      source: outCode!,
+    });
+    this.emitted.set(script, finalFilename);
+    if (appRelativeSourceMapURL && outMap) {
+      emit.push({
+        type: 'asset',
+        fileName: appRelativeSourceMapURL,
+        source: JSON.stringify(outMap, null, 2),
+      });
+    }
+    return emit;
+  }
+
+  async getFingerprintedFilename(filename: string, content: string): Promise<string> {
+    let crypto = await import('crypto');
+    let md5 = crypto.createHash('md5');
+    md5.update(content);
+    let hash = md5.digest('hex');
+    let fileParts = filename.split('.');
+    fileParts.splice(fileParts.length - 1, 0, hash);
+    return fileParts.join('.');
+  }
+
+  transformHTML(htmlIn: string) {
+    if (this.transformState?.htmlIn !== htmlIn) {
+      let parsed = new JSDOM(htmlIn);
+      let scriptTags = [...parsed.window.document.querySelectorAll('script')] as HTMLScriptElement[];
+      for (let scriptTag of scriptTags) {
+        if (scriptTag.type !== 'module') {
+          let fingerprinted = this.emitted.get(scriptTag.src);
+          if (fingerprinted) {
+            scriptTag.src = fingerprinted;
+          }
+        }
+      }
+      let htmlOut = parsed.serialize();
+      this.transformState = { htmlIn, parsed, htmlOut };
+    }
+    return this.transformState.htmlOut;
+  }
+}

package/src/template-tag.ts

@@ -0,0 +1,50 @@
+import { createFilter } from '@rollup/pluginutils';
+import type { Plugin } from 'vite';
+import { readFileSync } from 'fs';
+import { Preprocessor } from 'content-tag';
+
+const gjsFilter = createFilter('**/*.gjs');
+
+export function templateTag(): Plugin {
+  let preprocessor = new Preprocessor();
+
+  function candidates(id: string) {
+    return [id + '.gjs'];
+  }
+
+  return {
+    name: 'embroider-template-tag',
+    enforce: 'pre',
+
+    async resolveId(id: string, importer: string | undefined) {
+      let resolution = await this.resolve(id, importer, {
+        skipSelf: true,
+      });
+      if (resolution) {
+        return resolution;
+      }
+      for (let candidate of candidates(id)) {
+        resolution = await this.resolve(candidate, importer, {
+          skipSelf: true,
+          custom: {
+            embroider: {
+              enableCustomResolver: false,
+            },
+          },
+        });
+        if (resolution) {
+          return {
+            id: resolution.id,
+          };
+        }
+      }
+    },
+
+    load(id: string) {
+      if (!gjsFilter(id)) {
+        return null;
+      }
+      return preprocessor.process(readFileSync(id, 'utf8'), id);
+    },
+  };
+}