split implementation by compiler

Author: christian-bromann

packages/ssr/README.md

@@ -2,7 +2,7 @@
 
 > A package for server-side rendering Stencil components.
 
-This package provides utilities for server-side rendering Stencil components in React. You can use it in Next.js or Vite based applications, e.g. Remix.
+This package provides utilities for server-side rendering Stencil components in React. You can use it in Webpack, Next.js or Vite based applications, e.g. Remix.
 
 ## Install
 
@@ -14,6 +14,10 @@ $ npm install --save-dev @stencil/ssr
 
 ## Setup
 
+The package exports plugins for different compiler.
+
+### Vite
+
 In your e.g. Vite configuration, add the `stencilSSR` plugin as following:
 
 ```ts
@@ -55,6 +59,29 @@ export default stencilSSR({
 })(nextConfig);
 ```
 
+### Webpack
+
+In Webpack configurations you can set up this plugin as following:
+
+```ts
+const { StencilSSRWebpackPlugin } = require('@stencil/ssr/webpack')
+
+module.exports = {
+  //...
+  plugins: [
+    new StencilSSRWebpackPlugin({
+      module: import('component-library-react'),
+      from: 'component-library-react',
+      hydrateModule: import('component-library/hydrate'),
+      serializeShadowRoot: {
+        'scoped': ['my-counter'],
+        default: 'declarative-shadow-dom',
+      },
+    })
+  ],
+};
+```
+
 ## Options
 
 The plugin requires the following options:
@@ -70,3 +97,9 @@ The name of the library that exposes your Stencil components.
 ### `hydrateModule`
 
 The import of the hydrate module generated by the [Stencil hydrate output target](https://stenciljs.com/docs/hydrate-app#how-to-use-the-hydrate-app).
+
+For more information about Server Side Rendering with Stencil, checkout the [documentation](https://stenciljs.com/docs/server-side-rendering).
+
+### `runtime`
+
+The reference to the runtime package.

packages/ssr/package.json

@@ -12,18 +12,30 @@
   "bugs": {
     "url": "https://github.com/stenciljs/output-targets/issues"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/vite.cjs",
+  "module": "./dist/vite.js",
+  "types": "./dist/vite/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
     },
     "./next": {
-      "types": "./dist/next.d.ts",
-      "import": "./dist/next.js"
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next.js",
+      "require": "./dist/next.cjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack/index.d.ts",
+      "import": "./dist/webpack.js",
+      "require": "./dist/webpack.cjs"
     }
   },
   "files": [
@@ -34,8 +46,8 @@
   },
   "scripts": {
     "prepublishOnly": "pnpm run build",
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc -p tsconfig.json --watch",
+    "build": "vite build",
+    "dev": "vite build --watch",
     "version": "pnpm run build",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\" --write",
     "release": "np",
@@ -48,7 +60,7 @@
     "component-library": "workspace:*",
     "component-library-react": "workspace:*",
     "typescript": "^5.4.4",
-    "webpack": "^5.98.0"
+    "vite-plugin-dts": "^4.5.3"
   },
   "dependencies": {
     "ast-types": "^0.14.2",
@@ -60,6 +72,7 @@
   },
   "peerDependencies": {
     "vite": "^6.x",
-    "next": "13 || 14 || 15"
+    "next": "13 || 14 || 15",
+    "webpack": "^5.x"
   }
 }

packages/ssr/src/next.ts

@@ -0,0 +1,39 @@
+import type { Configuration } from 'webpack';
+import type { NextConfig } from 'next';
+import type { NextJsWebpackConfig, WebpackConfigContext } from 'next/dist/server/config-shared';
+
+import { StencilSSRWebpackPlugin, MinimalWebpackConfig } from '../webpack/index.js';
+import type { StencilSSROptions } from '../types.js';
+
+type StencilNextPlugin = (nextConfig: any) => NextConfig;
+
+export default (pluginOptions: StencilSSROptions): StencilNextPlugin => (nextConfig: NextConfig = {}) => {
+  const stencilSSRWebpackPlugin = new StencilSSRWebpackPlugin({
+    ...pluginOptions,
+    include: /\/pages\/.*\.(?:j|t)sx?$|\/app\/.*\.(?:j|t)sx?$/,
+    exclude: [/next\/dist\//, /node_modules/]
+  });
+
+  const webpack: NextJsWebpackConfig = (config: Configuration, options: WebpackConfigContext) => {
+    if (!config.module) {
+      config.module = {}
+    }
+
+    if (!config.module.rules) {
+      config.module.rules = []
+    }
+
+    stencilSSRWebpackPlugin.apply({ options: config as MinimalWebpackConfig['options'] });
+
+    // Apply user provided custom webpack config function if it exists.
+    if (typeof nextConfig.webpack === 'function') {
+      return nextConfig.webpack(config, options);
+    }
+
+    return config;
+  };
+
+  return Object.assign({}, nextConfig, { webpack });
+};
+
+export * from '../types.js';

packages/ssr/src/next/index.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite';
 
-import { transform } from './transform.js';
-import type { StencilSSROptions } from './types.js';
+import { transform } from '../transform.js';
+import type { StencilSSROptions } from '../types.js';
 
 export function stencilSSR(pluginOptions: StencilSSROptions) {
   return {

packages/ssr/src/index.ts packages/ssr/src/vite/index.ts

@@ -0,0 +1,62 @@
+import path from 'node:path';
+import url from 'node:url';
+
+import type { RuleSetRule } from 'webpack';
+
+import type { StencilSSROptions } from '../types.js';
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+export interface StencilSSRWebpackPluginOptions extends StencilSSROptions {
+  /**
+   * A regex matching the files that may include Stencil components
+   */
+  include?: RegExp;
+  /**
+   * A regex matching the files that should be ignored by the plugin
+   */
+  exclude?: RegExp[];
+  /**
+   * The package reference that contains the Stencil runtime, e.g. `component-library/loader`
+   */
+  runtime?: string;
+}
+
+export interface MinimalWebpackConfig {
+  options: {
+    module: {
+      rules: RuleSetRule[];
+    };
+  };
+}
+
+/**
+ * A simple Webpack plugin that adds a banner comment to the top of output files.
+ */
+export class StencilSSRWebpackPlugin {
+  #options: StencilSSROptions;
+  #include: RegExp;
+  #exclude: RegExp[];
+  constructor(options: StencilSSRWebpackPluginOptions) {
+    this.#options = options;
+    this.#include = options.include ?? /\.(jsx|tsx)$/;
+    this.#exclude = options.exclude ?? [/node_modules/];
+  }
+
+  apply(compiler: MinimalWebpackConfig): void {
+    /**
+     * adds our loader to the webpack config
+     */
+    compiler.options.module.rules.push({
+      test: this.#include,
+      exclude: this.#exclude,
+      enforce: 'pre',
+      use: [
+        {
+          loader: path.resolve(__dirname, 'loader.js'),
+          options: this.#options,
+        },
+      ],
+    });
+  }
+}

packages/ssr/src/webpack/index.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import stencilLoader from '../../src/next/loader.js';
+import stencilLoader from '../../src/webpack/loader.js';
 import { transform } from '../../src/transform.js';
 
 // Mock the transform module

packages/ssr/src/next/loader.ts packages/ssr/src/webpack/loader.ts

@@ -1,23 +1,26 @@
 // vite.config.ts
 import { defineConfig } from 'vite';
-
+import dts from 'vite-plugin-dts';
 export default defineConfig({
   build: {
     lib: {
       entry: {
-        index: 'src/index.ts',
-        next: 'src/next.ts'
+        vite: 'src/vite/index.ts',
+        next: 'src/next/index.ts',
+        webpack: 'src/webpack/index.ts',
+        loader: 'src/webpack/loader.ts',
       },
       formats: ['es', 'cjs'],
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: [
-        'node:path', 'node:url', 'node:fs',
+        'node:path', 'node:url', 'node:fs', 'webpack', 'next', 'vite',
         '@stencil/core', '@lit/react', 'typescript', 'react', 'react-dom/server', 'ts-morph',
         'html-react-parser', 'mlly', 'esbuild', 'recast', 'ast-types',
       ]
     },
   },
+  plugins: [dts()]
 });