@stencil/react-output-target - npm Package Compare versions

Comparing version 0.1.0-1 to 0.1.0-2

dist/index.cjs.js

@@ -110,7 +110,24 @@ 'use strict';
 import { createReactComponent } from './react-component-lib';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        if (outputTarget.componentCorePackage !== undefined) {
+            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
+        }
+        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
+    };
+    const typeImports = generateTypeImports();
     let sourceImports = '';
     let registerCustomElements = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
@@ -141,7 +158,16 @@ const cmpImports = components.map(component => {
 }
+/**
+ * Defines the React component that developers will import
+ * to use in their applications.
+ */
 function createComponentDefinition(cmpMeta, includeCustomElement = false) {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : 'undefined';
+    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : undefined;
+    let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+    if (importAs) {
+        template += `, ${importAs}`;
+    }
+    template += `);`;
     return [
-        `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}', ${importAs});`,
+        template
     ];
@@ -148,0 +174,0 @@ }

dist/index.js

@@ -101,7 +101,24 @@ import path from 'path';
 import { createReactComponent } from './react-component-lib';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        if (outputTarget.componentCorePackage !== undefined) {
+            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
+        }
+        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
+    };
+    const typeImports = generateTypeImports();
     let sourceImports = '';
     let registerCustomElements = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
@@ -132,7 +149,16 @@ const cmpImports = components.map(component => {
 }
+/**
+ * Defines the React component that developers will import
+ * to use in their applications.
+ */
 function createComponentDefinition(cmpMeta, includeCustomElement = false) {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : 'undefined';
+    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : undefined;
+    let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+    if (importAs) {
+        template += `, ${importAs}`;
+    }
+    template += `);`;
     return [
-        `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}', ${importAs});`,
+        template
     ];
@@ -139,0 +165,0 @@ }

dist/output-react.d.ts

@@ -5,3 +5,8 @@ import type { OutputTargetReact, PackageJSON } from './types';
 export declare function generateProxies(config: Config, components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetReact, rootDir: string): string;
+/**
+ * Defines the React component that developers will import
+ * to use in their applications.
+ */
+export declare function createComponentDefinition(cmpMeta: ComponentCompilerMeta, includeCustomElement?: boolean): string[];
 export declare function getPathToCorePackageLoader(config: Config, outputTarget: OutputTargetReact): string;
 export declare const GENERATED_DTS = "components.d.ts";

dist/output-react.js

@@ -23,7 +23,24 @@ import path from 'path';
 import { createReactComponent } from './react-component-lib';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        if (outputTarget.componentCorePackage !== undefined) {
+            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
+        }
+        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
+    };
+    const typeImports = generateTypeImports();
     let sourceImports = '';
     let registerCustomElements = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
@@ -54,7 +71,16 @@ const cmpImports = components.map(component => {
 }
-function createComponentDefinition(cmpMeta, includeCustomElement = false) {
+/**
+ * Defines the React component that developers will import
+ * to use in their applications.
+ */
+export function createComponentDefinition(cmpMeta, includeCustomElement = false) {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : 'undefined';
+    const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : undefined;
+    let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+    if (importAs) {
+        template += `, ${importAs}`;
+    }
+    template += `);`;
     return [
-        `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}', ${importAs});`,
+        template
     ];
@@ -61,0 +87,0 @@ }

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.1.0-1",
+  "version": "0.1.0-2",
   "description": "React output target for @stencil/core components.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

No alert changes

Improved metrics

Total package byte prevSize

51976

increased by7.21%

Lines of code

1158

increased by8.22%

Worsened metrics

Published versions last year

47

decreased by-2.08%

No dependency changes