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

React output target for @stencil/core components.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("ts-morph"),F=require("node:path"),I=e=>e.toLowerCase().split("-").map(n=>n.charAt(0).toUpperCase()+n.slice(1)).join(""),z=e=>e.replace(/-([_a-z])/g,(n,r)=>r.toUpperCase()),A=e=>e.replace(/\/([a-z])/g,(n,r)=>r.toUpperCase()),q=e=>{const n=A(e);return z(`on-${n}`)},L=e=>e.replace(/\/\/.*$/gm,"").replace(/\n/g," ").replace(/\s{2,}/g," ").trim(),k=async({components:e,project:n,outDir:r})=>{const f=n||new b.Project({useInMemoryFileSystem:!0}),d=`/* eslint-disable */
`,g=`/**
 * 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.
 */

`,p=F.join(r||"","components.ts"),u=f.createSourceFile(p,g+d,{overwrite:!0});for(const $ of e){const y=$.tagName,T=I(y),a=$.tagName;u.addExportDeclaration({moduleSpecifier:`./${a}.js`,namedExports:[T]})}return u.organizeImports(),u.formatText(),await u.save(),u},P=({components:e,stencilPackageName:n,customElementsDir:r,hydrateModule:f,clientModule:d,serializeShadowRoot:g,transformTag:p})=>{const u=new b.Project({useInMemoryFileSystem:!0}),$=f?"":`'use client';

`,y=`/**
 * 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.
 */

`,T=`/* eslint-disable */
`,a=p?`import { getTagTransformer } from './tag-transformer.js';
`:"",c=f?["// @ts-ignore - ignore potential type issues as the project is importing itself",`import * as clientComponents from '${d}';`,a,"import { createComponent, type SerializeShadowRootOptions, type HydrateModule, type ReactWebComponent, type DynamicFunction } from '@stencil/react-output-target/ssr';"].filter(Boolean).join(`
`):"import { createComponent } from '@stencil/react-output-target/runtime';",m=p?`import { transformTag } from './tag-transformer.js';
`:"",s=u.createSourceFile("component.ts",`${$}${y}${T}
import React from 'react';
${c}
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
${m}
  `);f&&s.addVariableStatement({isExported:!0,declarationKind:b.VariableDeclarationKind.Const,declarations:[{name:"serializeShadowRoot",type:"SerializeShadowRootOptions",initializer:g?JSON.stringify(g):'{ default: "declarative-shadow-dom" }'}]});for(const C of e){const i=C.tagName,o=I(i),l=`${o}Element`,v=`${o}CustomEvent`;s.addImportDeclaration({moduleSpecifier:`${n}/${r}/${i}.js`,namedImports:[{name:o,alias:l},{name:"defineCustomElement",alias:`define${o}`}]});const S=(C.events||[]).filter(t=>t.internal===!1),E=[],j=new Set;let O=!1;for(const t of S){if(Object.keys(t.complexType.references).length>0)for(const N of Object.keys(t.complexType.references))!(t.complexType.references[N].location==="global")&&!j.has(N)&&(j.add(N),s.addImportDeclaration({moduleSpecifier:n,namedImports:[{name:N,isTypeOnly:!0}]}));O||(O=!0,s.addImportDeclaration({moduleSpecifier:n,namedImports:[{name:v,isTypeOnly:!0}]})),E.push({originalName:t.name,name:q(t.name),type:`EventName<${v}<${L(t.complexType.original)}>>`})}const w=`${o}Events`;s.addTypeAlias({isExported:!0,name:w,type:E.length>0?`{ ${E.map(t=>`${t.name}: ${t.type}`).join(`,
`)} }`:"NonNullable<unknown>"});const x=p?`,
    transformTag`:"",M=`/*@__PURE__*/ createComponent<${l}, ${w}>({
    tagName: '${i}',
    elementClass: ${l},
    // @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 ${w},
    defineCustomElement: define${o}${x}
  })`,U=p?`,
    getTagTransformer`:"",D=`/*@__PURE__*/ createComponent<${l}, ${w}>({
    tagName: '${i}',
    properties: {${C.properties.filter(t=>!!t.attribute).map(t=>`${t.name}: '${t.attribute}'`).join(`,
`)}},
    hydrateModule: import('${f}') as Promise<HydrateModule>,
    clientModule: clientComponents.${o} as ReactWebComponent<${l}, ${w}>,
    serializeShadowRoot${U}
  })`;s.addVariableStatement({isExported:!0,declarationKind:b.VariableDeclarationKind.Const,declarations:[{name:o,type:`StencilReactComponent<${l}, ${w}>`,initializer:f?D:M}]})}return s.organizeImports(),s.formatText(),s.getFullText()},J=({stencilPackageName:e,customElementsDir:n})=>`/* eslint-disable */
/* tslint:disable */
import { setTagTransformer as clientSetTagTransformer } from '${e}/${n}/index.js';

let tagTransformer: ((tagName: string) => string) | undefined;

export const setTagTransformer = (transformer: (tagName: string) => string) => {
  clientSetTagTransformer(transformer);
  tagTransformer = transformer;
};

export const transformTag = (tag: string): string => {
  return tagTransformer ? tagTransformer(tag) : tag;
};

export const getTagTransformer = () => tagTransformer;
`,K=async({stencilPackageName:e,components:n,outDir:r,esModules:f,customElementsDir:d,excludeComponents:g,project:p,hydrateModule:u,clientModule:$,excludeServerSideRenderingFor:y,serializeShadowRoot:T,transformTag:a})=>{const c=[],m=n.filter(i=>!(i.internal===!0||g!=null&&g.includes(i.tagName)));if(m.length===0)return[];const s={};function C(i,o="components"){const l=F.join(r,`${o}.ts`),v=P({components:i,stencilPackageName:e,customElementsDir:d,transformTag:a});if(s[l]=v,a){const S=F.join(r,"tag-transformer.ts");s[S]=J({stencilPackageName:e,customElementsDir:d})}if(u){const S=F.join(r,`${o}.server.ts`),E=P({components:i.filter(j=>!y||!y.includes(j.tagName)),stencilPackageName:e,customElementsDir:d,hydrateModule:u,clientModule:$,serializeShadowRoot:T,transformTag:a});s[S]=E}}if(f){for(const o of m)C([o],o.tagName);const i=await k({components:m,project:p,outDir:r});c.push(i)}else C(m);return await Promise.all(Object.entries(s).map(async([i,o])=>{const l=p.createSourceFile(i,o,{overwrite:!0});await l.save(),c.push(l)})),c},h="react-output-target",G="dist/components",_="dist-custom-elements",R="dist-hydrate-script",V=({outDir:e,esModules:n,stencilPackageName:r,excludeComponents:f,customElementsDir:d,hydrateModule:g,clientModule:p,excludeServerSideRenderingFor:u,serializeShadowRoot:$,transformTag:y})=>{let T=G;return{type:"custom",name:h,validate(a){if(d)T=d;else{const c=(a.outputTargets||[]).find(m=>m.type===_);if(c==null)throw new Error(`The '${h}' requires '${_}' output target. Add { type: '${_}' }, to the outputTargets config.`);if(c.dir!==void 0&&(T=c.dir),c.externalRuntime!==!1)throw new Error(`The '${h}' requires the '${_}' output target to have 'externalRuntime: false' set in its configuration.`)}if(g){if((a.outputTargets||[]).find(m=>m.type===R)==null)throw new Error(`The '${h}' requires '${R}' output target when the 'hydrateModule' option is set. Add { type: '${R}' }, to the outputTargets config.`);if(p==null)throw new Error(`The '${h}' requires the 'clientModule' option when the 'hydrateModule' option is set. Please provide the clientModule manually to the ${h} output target.`)}if(!e)throw new Error("The 'outDir' option is required.");if(r===void 0){if(a.sys&&a.packageJsonFilePath){const{name:c}=JSON.parse(a.sys.readFileSync(a.packageJsonFilePath,"utf8"));r=c}if(!r)throw new Error(`Unable to find the package name in the package.json file: ${a.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${h} output target.`)}},async generator(a,c,m){const s=m.createTimeSpan(`generate ${h} started`,!0),C=m.components,i=new b.Project,o=await K({outDir:e,components:C,stencilPackageName:r,customElementsDir:T,excludeComponents:f,esModules:n===!0,project:i,hydrateModule:g,clientModule:p,excludeServerSideRenderingFor:u,serializeShadowRoot:$,transformTag:y});await Promise.all(o.map(l=>c.fs.writeFile(l.getFilePath(),l.getFullText()))),s.finish(`generate ${h} finished`)},__internal_getCustomElementsDir(){return T}}};exports.reactOutputTarget=V;
//# sourceMappingURL=index.cjs.map