diff --git a/.changeset/fair-fireants-burn.md b/.changeset/fair-fireants-burn.md new file mode 100644 index 0000000..c809cc5 --- /dev/null +++ b/.changeset/fair-fireants-burn.md @@ -0,0 +1,5 @@ +--- +"@marko/vite": major +--- + +Drop support for passing in a dynamic compiler (rely on peerDependency). diff --git a/.changeset/shy-penguins-stare.md b/.changeset/shy-penguins-stare.md new file mode 100644 index 0000000..c847946 --- /dev/null +++ b/.changeset/shy-penguins-stare.md @@ -0,0 +1,5 @@ +--- +"@marko/vite": minor +--- + +Detect when native tags api translator is in use and tweak virtual files to work properly. diff --git a/src/esbuild-plugin.ts b/src/esbuild-plugin.ts index a510741..e8c16dd 100644 --- a/src/esbuild-plugin.ts +++ b/src/esbuild-plugin.ts @@ -1,7 +1,7 @@ import fs from "fs"; import path from "path"; import type * as vite from "vite"; -import type * as Compiler from "@marko/compiler"; +import * as compiler from "@marko/compiler"; type ESBuildOptions = Exclude< vite.DepOptimizationConfig["esbuildOptions"], @@ -12,10 +12,7 @@ type ESBuildLoader = Exclude[string]; const markoErrorRegExp = /^(.+?)(?:\((\d+)(?:\s*,\s*(\d+))?\))?: (.*)$/gm; -export default function esbuildPlugin( - compiler: typeof Compiler, - config: Compiler.Config, -): ESBuildPlugin { +export default function esbuildPlugin(config: compiler.Config): ESBuildPlugin { return { name: "marko", async setup(build) { @@ -24,7 +21,7 @@ export default function esbuildPlugin( (v) => v.name === "vite:dep-scan", ); const virtualFiles = new Map(); - const finalConfig: Compiler.Config = { + const finalConfig: compiler.Config = { ...config, output: platform === "browser" ? "dom" : "html", resolveVirtualDependency(from, dep) { @@ -33,7 +30,7 @@ export default function esbuildPlugin( }, }; - const scanConfig: Compiler.Config = { + const scanConfig: compiler.Config = { ...finalConfig, output: "hydrate", }; diff --git a/src/index.ts b/src/index.ts index 982fb6d..38e839e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,6 @@ import type * as vite from "vite"; -import type * as Compiler from "@marko/compiler"; +import * as compiler from "@marko/compiler"; +import defaultConfig from "@marko/compiler/config"; import fs from "fs"; import path from "path"; @@ -33,8 +34,6 @@ export namespace API { export interface Options { // Defaults to true, set to false to disable automatic component discovery and hydration. linked?: boolean; - // Override the Marko compiler instance being used. (primarily for tools wrapping this module) - compiler?: string; // Sets a custom runtimeId to avoid conflicts with multiple copies of Marko on the same page. runtimeId?: string; // Overrides the Marko translator being used. @@ -42,7 +41,7 @@ export interface Options { // If set, will use the provided string as a variable name and prefix all assets paths with that variable. basePathVar?: string; // Overrides the Babel config that Marko will use. - babelConfig?: Compiler.Config["babelConfig"]; + babelConfig?: compiler.Config["babelConfig"]; } interface BrowserManifest { @@ -92,7 +91,7 @@ const htmlExt = ".html"; const resolveOpts = { skipSelf: true }; const configsByFileSystem = new Map< typeof fs, - Map + Map >(); const cache = new Map(); const babelCaller = { @@ -106,22 +105,21 @@ const babelCaller = { let registeredTagLib = false; // This package has a dependency on @parcel/source-map which uses native addons. -// Some enviroments like Stackblitz don't support loading these. So... load it +// Some environments like Stackblitz don't support loading these. So... load it // with a dynamic import to avoid everything failing. let cjsToEsm: typeof import("@chialab/cjs-to-esm").transform | null | undefined; export default function markoPlugin(opts: Options = {}): vite.Plugin[] { - let compiler: typeof Compiler; let { linked = true } = opts; let runtimeId: string | undefined; let basePathVar: string | undefined; - let baseConfig: Compiler.Config; - let ssrConfig: Compiler.Config; - let ssrCjsConfig: Compiler.Config; - let domConfig: Compiler.Config; - let hydrateConfig: Compiler.Config; + let baseConfig: compiler.Config; + let ssrConfig: compiler.Config; + let ssrCjsConfig: compiler.Config; + let domConfig: compiler.Config; + let hydrateConfig: compiler.Config; - const resolveVirtualDependency: Compiler.Config["resolveVirtualDependency"] = + const resolveVirtualDependency: compiler.Config["resolveVirtualDependency"] = (from, dep) => { const normalizedFrom = normalizePath(from); const query = `${virtualFileQuery}&id=${ @@ -152,6 +150,9 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] { let serverManifest: ServerManifest | undefined; let basePath = "/"; let getMarkoAssetFns: undefined | API.getMarkoAssetCodeForEntry[]; + const tagsAPI = !/^@marko\/translator-(?:default|interop-class-tags)$/.test( + opts.translator ?? defaultConfig.translator, + ); const entryIds = new Set(); const cachedSources = new Map(); const transformWatchFiles = new Map(); @@ -175,10 +176,6 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] { process.env.MARKO_DEBUG = optimize ? "false" : "true"; } - compiler ??= (await import( - opts.compiler || "@marko/compiler" - )) as typeof Compiler; - runtimeId = opts.runtimeId; basePathVar = opts.basePathVar; @@ -296,7 +293,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] { const esbuildOptions = (optimizeDeps.esbuildOptions ??= {}); const esbuildPlugins = (esbuildOptions.plugins ??= []); - esbuildPlugins.push(esbuildPlugin(compiler, baseConfig)); + esbuildPlugins.push(esbuildPlugin(baseConfig)); const ssr = (config.ssr ??= {}); const { noExternal } = ssr; @@ -658,6 +655,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] { entryData, runtimeId, basePathVar: isBuild ? basePathVar : undefined, + tagsAPI, }); } } @@ -940,7 +938,7 @@ function stripVersionAndTimeStamp(id: string) { */ function getConfigForFileSystem( info: vite.Rollup.ModuleInfo | undefined | null, - config: Compiler.Config, + config: compiler.Config, ) { const fileSystem = info?.meta.arcFS; if (!fileSystem) return config; diff --git a/src/render-assets-transform.ts b/src/render-assets-transform.ts index 54d61fe..ba3bb02 100644 --- a/src/render-assets-transform.ts +++ b/src/render-assets-transform.ts @@ -12,7 +12,7 @@ function renderAssetsCall(t: typeof types, slot: string) { return t.markoPlaceholder( t.callExpression( t.memberExpression( - t.memberExpression(t.identifier("out"), t.identifier("global")), + t.identifier("$global"), t.identifier("___viteRenderAssets"), ), [t.stringLiteral(slot)], diff --git a/src/server-entry-template.ts b/src/server-entry-template.ts index 92ecb87..0de1a7c 100644 --- a/src/server-entry-template.ts +++ b/src/server-entry-template.ts @@ -5,42 +5,47 @@ export default async (opts: { entryData: string[]; runtimeId?: string; basePathVar?: string; + tagsAPI?: boolean; }): Promise => { + const addAssetsCall = `addAssets($global, [${opts.entryData.join(",")}])`; const fileNameStr = JSON.stringify(`./${path.basename(opts.fileName)}`); return `import template from ${fileNameStr}; export * from ${fileNameStr}; import { addAssets } from "${renderAssetsRuntimeId}"; -$ const g = out.global; -$ const writeSync = addAssets(g, [${opts.entryData.join(",")}]); +${opts.tagsAPI ? `` : `$ const writeSync = ${addAssetsCall};`} $!{ - g.___viteRenderAssets("head-prepend") + - g.___viteRenderAssets("head") + - g.___viteRenderAssets("body-prepend") + $global.___viteRenderAssets("head-prepend") + + $global.___viteRenderAssets("head") + + $global.___viteRenderAssets("body-prepend") } <__flush_here_and_after__> $!{ - g.___viteRenderAssets("head-prepend") + - g.___viteRenderAssets("head") + - g.___viteRenderAssets("body-prepend") + $global.___viteRenderAssets("head-prepend") + + $global.___viteRenderAssets("head") + + $global.___viteRenderAssets("body-prepend") } -<\${template} ...input/> +<\${template} ...input/>${ + opts.tagsAPI + ? "" + : ` - +` + } - $!{g.___viteRenderAssets("body")} + $!{$global.___viteRenderAssets("body")} <__flush_here_and_after__> - $!{g.___viteRenderAssets("body")} + $!{$global.___viteRenderAssets("body")} `;