@stencil/angular-output-target 1.5.2 → 1.5.3

package/dist/wizard.js

@@ -1,5 +1,5 @@
 import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, relative, dirname } from 'node:path';
+import { join, relative, dirname, isAbsolute } from 'node:path';
 // ---------------------------------------------------------------------------
 // pnpm build approval
 // ---------------------------------------------------------------------------
@@ -77,7 +77,22 @@ function toPascalCase(s) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join('');
 }
-async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName, corePkgVersion, namespace, outputType) {
+/**
+ * The module the lazy loader's `defineCustomElements()` is imported from: the `./loader` entry
+ * when the project generates an `exports` map, otherwise its place in the `loader-bundle` output.
+ */
+function getLoaderModule(config, corePackageName) {
+    if (config.generateExportMaps === true) {
+        return `${corePackageName}/loader`;
+    }
+    const target = config.outputTargets?.find((o) => o.type === 'loader-bundle');
+    const rawDir = target?.dir ?? 'dist/loader-bundle';
+    const dir = (isAbsolute(rawDir) ? relative(config.rootDir, rawDir) : rawDir).replace(/\\/g, '/');
+    return `${corePackageName}/${dir}/${target?.loaderPath || 'loader'}`;
+}
+async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName, corePkgVersion, namespace, outputType, 
+/** For the 'component' type: the module to import the loader's `defineCustomElements()` from. */
+loaderModule) {
     const libDir = join(wrapperDir, 'src', 'lib');
     await mkdir(libDir, { recursive: true });
     const className = toPascalCase(namespace);
@@ -125,12 +140,23 @@ async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName,
     // NgModule file — only needed for 'component' outputType
     let ngModuleTs;
     if (outputType === 'component') {
+        // The 'component' type's wrappers register nothing themselves: this module does it, with the
+        // lazy loader, when the consuming app starts. It's written once and never regenerated.
         ngModuleTs =
-            `import { NgModule } from '@angular/core';\n` +
+            `import { NgModule, provideAppInitializer } from '@angular/core';\n` +
+                `import { defineCustomElements } from '${loaderModule}';\n` +
                 `import { DIRECTIVES } from './directives.array';\n\n` +
+                `/**\n` +
+                ` * Declares every component, and registers the custom elements when the app starts.\n` +
+                ` *\n` +
+                ` * This file is yours to edit - Stencil doesn't regenerate it. Do any setup your library\n` +
+                ` * needs before the components are defined in the initializer, e.g. \`setNonce()\` or\n` +
+                ` * \`setTagTransformer()\` (both exported by the loader).\n` +
+                ` */\n` +
                 `@NgModule({\n` +
                 `  declarations: [...DIRECTIVES],\n` +
                 `  exports: [...DIRECTIVES],\n` +
+                `  providers: [provideAppInitializer(() => defineCustomElements())],\n` +
                 `})\n` +
                 `export class ${className}Module {}\n`;
     }
@@ -240,7 +266,7 @@ export const wizard = {
                     const corePkgVersion = supportsWorkspaceProtocol
                         ? 'workspace:*'
                         : `file:${relative(wrapperDir, config.rootDir)}`;
-                    await scaffoldWrapperPackage(wrapperDir, wrapperPackageName, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType);
+                    await scaffoldWrapperPackage(wrapperDir, wrapperPackageName, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType, selectedOutputType === 'component' ? getLoaderModule(config, componentCorePackage) : undefined);
                     s.stop('Wrapper package scaffolded');
                 }
                 catch (e) {
@@ -263,7 +289,8 @@ export const wizard = {
             // Build target config
             const lines = [
                 `componentCorePackage: '${componentCorePackage}'`,
-                `customElementsDir: '${customElementsDir}'`,
+                // only the types built on the `standalone` output import from it
+                ...(selectedOutputType !== 'component' ? [`customElementsDir: '${customElementsDir}'`] : []),
                 `directivesProxyFile: '${directivesProxyFile}'`,
                 ...(directivesArrayFile ? [`directivesArrayFile: '${directivesArrayFile}'`] : []),
                 ...(selectedOutputType !== 'standalone' ? [`outputType: '${selectedOutputType}'`] : []),
@@ -276,8 +303,18 @@ export const wizard = {
                     editor.outputTargetsContains('type: "standalone"') ||
                     editor.outputTargetsContains("type: 'dist-custom-elements'") ||
                     editor.outputTargetsContains('type: "dist-custom-elements"');
-                if (!hasStandalone)
+                const hasLoaderBundle = editor.outputTargetsContains("type: 'loader-bundle'") ||
+                    editor.outputTargetsContains('type: "loader-bundle"') ||
+                    editor.outputTargetsContains("type: 'dist'") ||
+                    editor.outputTargetsContains('type: "dist"');
+                // 'component' wrappers rely on the lazy loader; the other types import from `standalone`
+                if (selectedOutputType === 'component') {
+                    if (!hasLoaderBundle)
+                        editor.addOutputTarget("{ type: 'loader-bundle' }");
+                }
+                else if (!hasStandalone) {
                     editor.addOutputTarget("{ type: 'standalone' }");
+                }
                 if (!editor.replaceOutputTarget('angularOutputTarget(', targetCode)) {
                     editor.addOutputTarget(targetCode);
                 }
@@ -306,6 +343,10 @@ export const wizard = {
                 ], { cwd: wrapperDir, dev: true });
                 log.success('Angular dependencies installed');
             }
+            if (selectedOutputType === 'component' && !shouldScaffold) {
+                log.info(`NgModule components: your Angular package's module needs to call defineCustomElements() ` +
+                    `from '${getLoaderModule(config, componentCorePackage)}' when the app starts, e.g. with provideAppInitializer().`);
+            }
             outro('Angular output target configured');
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",