@stencil/react-output-target/dist/index.cjs

React output target for @stencil/core components.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("ts-morph"),_=require("node:path"),O=o=>o.toLowerCase().split("-").map(a=>a.charAt(0).toUpperCase()+a.slice(1)).join(""),P=o=>o.replace(/-([_a-z])/g,(a,r)=>r.toUpperCase()),I=o=>o.replace(/\/([a-z])/g,(a,r)=>r.toUpperCase()),F=o=>{const a=I(o);return P(`on-${a}`)},D=async({components:o,project:a,outDir:r})=>{const m=a||new w.Project({useInMemoryFileSystem:!0}),g=`/* eslint-disable */
`,u=`/**
 * This file was automatically generated by the Stencil React Output Target.
 * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 */

`,h=_.join(r||"","components.ts"),l=m.createSourceFile(h,u+g,{overwrite:!0});for(const T of o){const d=T.tagName,i=O(d),e=T.tagName;l.addExportDeclaration({moduleSpecifier:`./${e}.js`,namedExports:[i]})}return l.organizeImports(),l.formatText(),await l.save(),l},R=({components:o,stencilPackageName:a,customElementsDir:r,hydrateModule:m,clientModule:g,serializeShadowRoot:u})=>{const h=new w.Project({useInMemoryFileSystem:!0}),l=m?"":`'use client';

`,T=`/**
 * This file was automatically generated by the Stencil React Output Target.
 * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 */

`,d=`/* eslint-disable */
`,i=m?["// @ts-ignore - ignore potential type issues as the project is importing itself",`import * as clientComponents from '${g}';`,"","import { createComponent, type SerializeShadowRootOptions, type HydrateModule, type ReactWebComponent, type DynamicFunction } from '@stencil/react-output-target/ssr';"].join(`
`):"import { createComponent } from '@stencil/react-output-target/runtime';",e=h.createSourceFile("component.ts",`${l}${T}${d}
import React from 'react';
${i}
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
  `);m&&e.addVariableStatement({isExported:!0,declarationKind:w.VariableDeclarationKind.Const,declarations:[{name:"serializeShadowRoot",type:"SerializeShadowRootOptions",initializer:u?JSON.stringify(u):'{ default: "declarative-shadow-dom" }'}]});for(const s of o){const f=s.tagName,c=O(f),n=`${c}Element`,p=`${c}CustomEvent`;e.addImportDeclaration({moduleSpecifier:`${a}/${r}/${f}.js`,namedImports:[{name:c,alias:n},{name:"defineCustomElement",alias:`define${c}`}]});const y=(s.events||[]).filter(t=>t.internal===!1),E=[];for(const t of y)if(Object.keys(t.complexType.references).length>0){for(const j of Object.keys(t.complexType.references))t.complexType.references[j].location==="global"||e.addImportDeclaration({moduleSpecifier:a,namedImports:[{name:j,isTypeOnly:!0}]});e.addImportDeclaration({moduleSpecifier:a,namedImports:[{name:p,isTypeOnly:!0}]}),E.push({originalName:t.name,name:F(t.name),type:`EventName<${p}<${t.complexType.original}>>`})}else E.push({originalName:t.name,name:F(t.name),type:`EventName<CustomEvent<${t.complexType.original}>>`});const C=`${c}Events`;e.addTypeAlias({isExported:!0,name:C,type:E.length>0?`{ ${E.map(t=>`${t.name}: ${t.type}`).join(`,
`)} }`:"NonNullable<unknown>"});const S=`/*@__PURE__*/ createComponent<${n}, ${C}>({
    tagName: '${f}',
    elementClass: ${n},
    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
    react: React,
    events: {${E.map(t=>`${t.name}: '${t.originalName}'`).join(`,
`)}} as ${C},
    defineCustomElement: define${c}
  })`,v=`/*@__PURE__*/ createComponent<${n}, ${C}>({
    tagName: '${f}',
    properties: {${s.properties.filter(t=>!!t.attribute).map(t=>`${t.name}: '${t.attribute}'`).join(`,
`)}},
    hydrateModule: import('${m}') as Promise<HydrateModule>,
    clientModule: clientComponents.${c} as ReactWebComponent<${n}, ${C}>,
    serializeShadowRoot,
  })`;e.addVariableStatement({isExported:!0,declarationKind:w.VariableDeclarationKind.Const,declarations:[{name:c,type:`StencilReactComponent<${n}, ${C}>`,initializer:m?v:S}]})}return e.organizeImports(),e.formatText(),e.getFullText()},M=async({stencilPackageName:o,components:a,outDir:r,esModules:m,customElementsDir:g,excludeComponents:u,project:h,hydrateModule:l,clientModule:T,excludeServerSideRenderingFor:d,serializeShadowRoot:i})=>{const e=[],s=a.filter(n=>!(n.internal===!0||u!=null&&u.includes(n.tagName)));if(s.length===0)return[];const f={};function c(n,p="components"){const y=_.join(r,`${p}.ts`),E=R({components:n,stencilPackageName:o,customElementsDir:g});if(f[y]=E,l){const C=_.join(r,`${p}.server.ts`),S=R({components:n.filter(v=>!d||!d.includes(v.tagName)),stencilPackageName:o,customElementsDir:g,hydrateModule:l,clientModule:T,serializeShadowRoot:i});f[C]=S}}if(m){for(const p of s)c([p],p.tagName);const n=await D({components:s,project:h,outDir:r});e.push(n)}else c(s);return await Promise.all(Object.entries(f).map(async([n,p])=>{const y=h.createSourceFile(n,p,{overwrite:!0});await y.save(),e.push(y)})),e},$="react-output-target",U="dist/components",b="dist-custom-elements",N="dist-hydrate-script",x=({outDir:o,esModules:a,stencilPackageName:r,excludeComponents:m,customElementsDir:g,hydrateModule:u,clientModule:h,excludeServerSideRenderingFor:l,serializeShadowRoot:T})=>{let d=U;return{type:"custom",name:$,validate(i){if(g)d=g;else{const e=(i.outputTargets||[]).find(s=>s.type===b);if(e==null)throw new Error(`The '${$}' requires '${b}' output target. Add { type: '${b}' }, to the outputTargets config.`);if(e.dir!==void 0&&(d=e.dir),e.externalRuntime!==!1)throw new Error(`The '${$}' requires the '${b}' output target to have 'externalRuntime: false' set in its configuration.`)}if(u){if((i.outputTargets||[]).find(s=>s.type===N)==null)throw new Error(`The '${$}' requires '${N}' output target when the 'hydrateModule' option is set. Add { type: '${N}' }, to the outputTargets config.`);if(h==null)throw new Error(`The '${$}' requires the 'clientModule' option when the 'hydrateModule' option is set. Please provide the clientModule manually to the ${$} output target.`)}if(!o)throw new Error("The 'outDir' option is required.");if(r===void 0){if(i.sys&&i.packageJsonFilePath){const{name:e}=JSON.parse(i.sys.readFileSync(i.packageJsonFilePath,"utf8"));r=e}if(!r)throw new Error(`Unable to find the package name in the package.json file: ${i.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${$} output target.`)}},async generator(i,e,s){const f=s.createTimeSpan(`generate ${$} started`,!0),c=s.components,n=new w.Project,p=await M({outDir:o,components:c,stencilPackageName:r,customElementsDir:d,excludeComponents:m,esModules:a===!0,project:n,hydrateModule:u,clientModule:h,excludeServerSideRenderingFor:l,serializeShadowRoot:T});await Promise.all(p.map(y=>e.fs.writeFile(y.getFilePath(),y.getFullText()))),f.finish(`generate ${$} finished`)},__internal_getCustomElementsDir(){return d}}};exports.reactOutputTarget=x;
//# sourceMappingURL=index.cjs.map