actionview-svelte-handler 0.3.0 → 0.5.0

data/lib/ts/builder.ts

@@ -0,0 +1,175 @@
+import { readable, Stores } from 'svelte/store'
+import { importFromStringSync } from 'module-from-string'
+import * as esbuild from 'esbuild'
+import sveltePlugin from 'esbuild-svelte'
+import { sveltePreprocess } from 'svelte-preprocess'
+import type { Warning } from 'svelte/types/compiler/interfaces'
+import * as recast from 'recast'
+
+export interface BuildSuccess {
+  client: string
+  server: {
+    html: string
+    css: string
+    head: string
+  } | null
+  compiled: {
+    client: string
+    server: string | undefined
+  }
+}
+
+export interface BuildError {
+  error: any
+}
+
+export type BuildResult = BuildSuccess | BuildError
+
+/**
+ * Builder is a class that builds, compiles and bundles Svelte components into a nice object for the template handler
+ */
+class Builder {
+  path: string
+  props: Stores
+  locals: object
+  compiled: {
+    client: string | null
+    server: string | null
+  }
+
+  ssr: boolean
+  workingDir: string
+  preprocess: object
+
+  constructor (
+    path: string,
+    props: object,
+    locals: object,
+    client: string | null,
+    server: string | null,
+    ssr: boolean,
+    workingDir: string,
+    preprocess: object
+  ) {
+    this.path = path
+    this.props = readable(props)
+    this.locals = locals
+    this.compiled = {
+      client,
+      server
+    }
+    this.ssr = ssr
+    this.workingDir = workingDir
+    this.preprocess = preprocess
+  }
+
+  async bundle (generate: 'ssr' | 'dom', sveltePath = 'svelte'): Promise<string> {
+    const bundle = await esbuild.build({
+      entryPoints: [this.path],
+      mainFields: ['svelte', 'browser', 'module', 'main'],
+      conditions: ['svelte', 'browser'],
+      absWorkingDir: this.workingDir,
+      write: false,
+      outfile: 'component.js',
+      bundle: true,
+      format: 'esm',
+      metafile: true,
+      plugins: [
+        // @ts-expect-error
+        sveltePlugin({
+          compilerOptions: {
+            generate,
+            css: 'injected',
+            hydratable: true,
+            sveltePath
+          },
+          preprocess: sveltePreprocess(this.preprocess),
+          filterWarnings: (warning: Warning) => {
+            if (
+              warning.code === 'missing-declaration' &&
+              warning.message.includes("'props'")
+            ) {
+              return false
+            }
+            return true
+          }
+        })
+      ]
+    })
+
+    // @ts-expect-error
+    const throwables = [].concat(bundle.errors, bundle.warnings)
+
+    if (throwables.length > 0) {
+      throw throwables[0] // eslint-disable-line @typescript-eslint/no-throw-literal
+    }
+
+    return bundle.outputFiles[0].text
+  }
+
+  async client (): Promise<string> {
+    return (
+      this.compiled?.client || (this.standardizeClient(await this.bundle('dom', 'https://esm.sh/svelte'))) // eslint-disable-line
+    )
+  }
+
+  standardizeClient (code: string): string {
+    const ast = recast.parse(code)
+
+    let name: string | undefined
+
+    recast.visit(ast, {
+      visitExportNamedDeclaration: (path) => {
+        const stagingName: any = path.node?.specifiers?.[0].local?.name
+        name = typeof stagingName !== 'string' ? '' : stagingName
+        path.prune()
+        return false
+      }
+    })
+
+    recast.visit(ast, {
+      visitIdentifier: (path) => {
+        if (path.node.name === name) {
+          path.node.name = 'App'
+        }
+        return false
+      }
+    })
+
+    return recast.print(ast).code
+  }
+
+  async server (): Promise<{ output: string, html: string, css: string, head: string }> {
+    const output = this.compiled?.server || (await this.bundle('ssr')) // eslint-disable-line
+
+    const Component = importFromStringSync(output, {
+      globals: { props: this.props }
+    }).default
+
+    const { html, css, head } = await Component.render(this.locals)
+
+    return { output, html, head, css: css.code }
+  }
+
+  async build (): Promise<BuildResult> {
+    try {
+      const serv = this.ssr ? await this.server() : null
+      const cli = await this.client()
+
+      const comp = {
+        client: cli,
+        server: serv?.output
+      }
+
+      return {
+        client: cli,
+        server: serv,
+        compiled: comp
+      }
+    } catch (e) {
+      return { error: e }
+    }
+  }
+}
+
+export default Builder

data/lib/ts/types/.DO_NOT_MODIFY.md

@@ -0,0 +1,2 @@
+> [!CAUTION]
+> This folder is intended to be built from TypeScript files with `npm run build`

data/lib/ts/types/builder.d.ts

@@ -0,0 +1,44 @@
+import { Stores } from 'svelte/store';
+export interface BuildSuccess {
+    client: string;
+    server: {
+        html: string;
+        css: string;
+        head: string;
+    } | null;
+    compiled: {
+        client: string;
+        server: string | undefined;
+    };
+}
+export interface BuildError {
+    error: any;
+}
+export type BuildResult = BuildSuccess | BuildError;
+/**
+ * Builder is a class that builds, compiles and bundles Svelte components into a nice object for the template handler
+ */
+declare class Builder {
+    path: string;
+    props: Stores;
+    locals: object;
+    compiled: {
+        client: string | null;
+        server: string | null;
+    };
+    ssr: boolean;
+    workingDir: string;
+    preprocess: object;
+    constructor(path: string, props: object, locals: object, client: string | null, server: string | null, ssr: boolean, workingDir: string, preprocess: object);
+    bundle(generate: 'ssr' | 'dom', sveltePath?: string): Promise<string>;
+    client(): Promise<string>;
+    standardizeClient(code: string): string;
+    server(): Promise<{
+        output: string;
+        html: string;
+        css: string;
+        head: string;
+    }>;
+    build(): Promise<BuildResult>;
+}
+export default Builder;