diff --git a/packages/angular-output-target/angular-component-lib/utils.ts b/packages/angular-output-target/angular-component-lib/utils.ts index e0c62977..d6cf7bd4 100644 --- a/packages/angular-output-target/angular-component-lib/utils.ts +++ b/packages/angular-output-target/angular-component-lib/utils.ts @@ -43,11 +43,13 @@ export const defineCustomElement = (tagName: string, customElement: any) => { } // tslint:disable-next-line: only-arrow-functions -export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) { +export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) { const decorator = function (cls: any) { - const { tagName, customElement, inputs, methods } = opts; + const { defineCustomElementFn, inputs, methods } = opts; - defineCustomElement(tagName, customElement); + if (defineCustomElementFn !== undefined) { + defineCustomElementFn(); + } if (inputs) { proxyInputs(cls, inputs); diff --git a/packages/angular-output-target/package-lock.json b/packages/angular-output-target/package-lock.json index 3bf1f335..9aa5eb88 100644 --- a/packages/angular-output-target/package-lock.json +++ b/packages/angular-output-target/package-lock.json @@ -1,8 +1,56 @@ { "name": "@stencil/angular-output-target", - "version": "0.3.0", - "lockfileVersion": 1, + "version": "0.4.0-2", + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "@stencil/angular-output-target", + "version": "0.4.0-2", + "license": "MIT", + "devDependencies": { + "@angular/core": "8.2.14", + "@angular/forms": "8.2.14" + }, + "peerDependencies": { + "@stencil/core": "^2.9.0" + } + }, + "node_modules/@angular/core": { + "version": "8.2.14", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.14.tgz", + "integrity": "sha512-zeePkigi+hPh3rN7yoNENG/YUBUsIvUXdxx+AZq+QPaFeKEA2FBSrKn36ojHFrdJUjKzl0lPMEiGC2b6a6bo6g==", + "dev": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "peerDependencies": { + "rxjs": "^6.4.0", + "zone.js": "~0.9.1" + } + }, + "node_modules/@angular/forms": { + "version": "8.2.14", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.14.tgz", + "integrity": "sha512-zhyKL3CFIqcyHJ/TQF/h1OZztK611a6rxuPHCrt/5Sn1SuBTJJQ1pPTkOYIDy6IrCrtyANc8qB6P17Mao71DNQ==", + "dev": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "peerDependencies": { + "@angular/common": "8.2.14", + "@angular/core": "8.2.14", + "@angular/platform-browser": "8.2.14", + "rxjs": "^6.4.0" + } + }, + "node_modules/tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", + "dev": true + } + }, "dependencies": { "@angular/core": { "version": "8.2.14", diff --git a/packages/angular-output-target/package.json b/packages/angular-output-target/package.json index 640a8431..8daab055 100644 --- a/packages/angular-output-target/package.json +++ b/packages/angular-output-target/package.json @@ -1,6 +1,6 @@ { "name": "@stencil/angular-output-target", - "version": "0.3.0", + "version": "0.4.0-2", "description": "Angular output target for @stencil/core components.", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -37,6 +37,9 @@ "@angular/core": "8.2.14", "@angular/forms": "8.2.14" }, + "peerDependencies": { + "@stencil/core": "^2.9.0" + }, "jest": { "transform": { "^.+\\.(js|ts|tsx)$": "/test/jest.preprocessor.js" diff --git a/packages/angular-output-target/src/generate-angular-component.ts b/packages/angular-output-target/src/generate-angular-component.ts index cb7760ec..9ad0e830 100644 --- a/packages/angular-output-target/src/generate-angular-component.ts +++ b/packages/angular-output-target/src/generate-angular-component.ts @@ -124,8 +124,7 @@ function getProxyCmp(tagName: string, includeCustomElement: boolean, inputs: str const hasMethods = methods.length > 0; const proxMeta: string[] = [ - `tagName: \'${tagName}\'`, - `customElement: ${includeCustomElement ? dashToPascalCase(tagName) + 'Cmp' : 'undefined'}` + `defineCustomElementFn: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}` ]; if (hasInputs) proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`); diff --git a/packages/angular-output-target/src/output-angular.ts b/packages/angular-output-target/src/output-angular.ts index afbaeda7..3da0e15e 100644 --- a/packages/angular-output-target/src/output-angular.ts +++ b/packages/angular-output-target/src/output-angular.ts @@ -101,7 +101,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`; const cmpImports = components.map(component => { const pascalImport = dashToPascalCase(component.tagName); - return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || + return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || 'components' }/${component.tagName}.js';`; }); diff --git a/packages/react-output-target/__tests__/generate-react-components.spec.ts b/packages/react-output-target/__tests__/generate-react-components.spec.ts index e7da384f..d1409ea4 100644 --- a/packages/react-output-target/__tests__/generate-react-components.spec.ts +++ b/packages/react-output-target/__tests__/generate-react-components.spec.ts @@ -10,7 +10,7 @@ describe('createComponentDefinition', () => { methods: [], events: [], }, true); - expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createReactComponent('my-component', undefined, undefined, MyComponentCmp);`); + expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createReactComponent('my-component', undefined, undefined, defineMyComponent);`); }); it('should create a React component without custom element support', () => { diff --git a/packages/react-output-target/package-lock.json b/packages/react-output-target/package-lock.json index 8f3dad2a..acc3a9ce 100644 --- a/packages/react-output-target/package-lock.json +++ b/packages/react-output-target/package-lock.json @@ -1,22 +1,22 @@ { "name": "@stencil/react-output-target", - "version": "0.1.0", + "version": "0.2.0-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@stencil/react-output-target", - "version": "0.1.0", + "version": "0.2.0-0", "license": "MIT", "devDependencies": { - "@types/react": "16.14.0", - "@types/react-dom": "^16.9.0", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "@types/react": "^16.7.0", + "@types/react-dom": "^16.7.0", + "react": "^16.7.0", + "react-dom": "^16.7.0", "react-testing-library": "^7.0.0" }, "peerDependencies": { - "@stencil/core": ">=1.8.0" + "@stencil/core": "^2.9.0" } }, "node_modules/@babel/runtime": { @@ -48,19 +48,6 @@ "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==", "dev": true }, - "node_modules/@stencil/core": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.7.1.tgz", - "integrity": "sha512-kpeqCyfoWyqyiqn32xQGx5bpVwH1UtcZEpYPx42MpoxHZNlpmjV+852/PGFFWsMTqrLiP8Z1NU5rT7yXUCsG6Q==", - "peer": true, - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=12.10.0", - "npm": ">=6.0.0" - } - }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -332,12 +319,6 @@ "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==", "dev": true }, - "@stencil/core": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.7.1.tgz", - "integrity": "sha512-kpeqCyfoWyqyiqn32xQGx5bpVwH1UtcZEpYPx42MpoxHZNlpmjV+852/PGFFWsMTqrLiP8Z1NU5rT7yXUCsG6Q==", - "peer": true - }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", diff --git a/packages/react-output-target/package.json b/packages/react-output-target/package.json index c97ebf8e..c1d260f4 100644 --- a/packages/react-output-target/package.json +++ b/packages/react-output-target/package.json @@ -1,6 +1,6 @@ { "name": "@stencil/react-output-target", - "version": "0.1.0", + "version": "0.2.0-0", "description": "React output target for @stencil/core components.", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -32,7 +32,7 @@ "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues" }, "peerDependencies": { - "@stencil/core": ">=1.8.0" + "@stencil/core": "^2.9.0" }, "devDependencies": { "@types/react": "^16.7.0", diff --git a/packages/react-output-target/react-component-lib/createComponent.tsx b/packages/react-output-target/react-component-lib/createComponent.tsx index c3be0b1d..d179160f 100644 --- a/packages/react-output-target/react-component-lib/createComponent.tsx +++ b/packages/react-output-target/react-component-lib/createComponent.tsx @@ -4,7 +4,6 @@ import { attachProps, createForwardRef, dashToPascalCase, - defineCustomElement, isCoveredByReact, mergeRefs, } from './utils'; @@ -30,9 +29,11 @@ export const createReactComponent = < originalProps: StencilReactInternalProps, propsToPass: any, ) => ExpandedPropsTypes, - customElement?: any, + defineCustomElement?: () => void, ) => { - defineCustomElement(tagName, customElement); + if (defineCustomElement !== undefined) { + defineCustomElement(); + } const displayName = dashToPascalCase(tagName); const ReactComponent = class extends React.Component> { diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts index 3efbdbda..f03da528 100644 --- a/packages/react-output-target/src/output-react.ts +++ b/packages/react-output-target/src/output-react.ts @@ -76,7 +76,7 @@ import { createReactComponent } from './react-component-lib';\n`; const cmpImports = components.map(component => { const pascalImport = dashToPascalCase(component.tagName); - return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || + return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || 'components' }/${component.tagName}.js';`; }); @@ -117,7 +117,7 @@ export function createComponentDefinition(cmpMeta: ComponentCompilerMeta, includ let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`; if (includeCustomElement) { - template += `, undefined, undefined, ${tagNameAsPascal}Cmp`; + template += `, undefined, undefined, define${tagNameAsPascal}`; } template += `);`; diff --git a/packages/svelte-output-target/package-lock.json b/packages/svelte-output-target/package-lock.json index 10182d28..f4cfb1f7 100644 --- a/packages/svelte-output-target/package-lock.json +++ b/packages/svelte-output-target/package-lock.json @@ -1,8 +1,37 @@ { "name": "@stencil/svelte-output-target", - "version": "0.0.1", - "lockfileVersion": 1, + "version": "0.0.3", + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "@stencil/svelte-output-target", + "version": "0.0.3", + "license": "MIT", + "devDependencies": { + "estree-walker": "^2.0.1", + "svelte": "^3.24.1" + }, + "peerDependencies": { + "@stencil/core": "^2.9.0" + } + }, + "node_modules/estree-walker": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz", + "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", + "dev": true + }, + "node_modules/svelte": { + "version": "3.24.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.24.1.tgz", + "integrity": "sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==", + "dev": true, + "engines": { + "node": ">= 8" + } + } + }, "dependencies": { "estree-walker": { "version": "2.0.1", diff --git a/packages/svelte-output-target/package.json b/packages/svelte-output-target/package.json index 6f8a995a..142c26df 100644 --- a/packages/svelte-output-target/package.json +++ b/packages/svelte-output-target/package.json @@ -31,7 +31,7 @@ "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues" }, "peerDependencies": { - "@stencil/core": ">=1.8.0 || ^2.0.0" + "@stencil/core": "^2.9.0" }, "devDependencies": { "estree-walker": "^2.0.1", diff --git a/packages/vue-output-target/__tests__/generate-vue-components.spec.ts b/packages/vue-output-target/__tests__/generate-vue-components.spec.ts index 8863a99d..e6010b01 100644 --- a/packages/vue-output-target/__tests__/generate-vue-components.spec.ts +++ b/packages/vue-output-target/__tests__/generate-vue-components.spec.ts @@ -23,7 +23,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer events: [], }); expect(output).toEqual(` -export const MyComponent = /*@__PURE__*/ defineContainer('my-component', MyComponentCmp); +export const MyComponent = /*@__PURE__*/ defineContainer('my-component', defineMyComponent); ` }); diff --git a/packages/vue-output-target/package-lock.json b/packages/vue-output-target/package-lock.json index c7a2cb56..ff7dc22a 100644 --- a/packages/vue-output-target/package-lock.json +++ b/packages/vue-output-target/package-lock.json @@ -1,15 +1,15 @@ { "name": "@stencil/vue-output-target", - "version": "0.5.1", + "version": "0.6.0-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@stencil/vue-output-target", - "version": "0.5.1", + "version": "0.6.0-0", "license": "MIT", "peerDependencies": { - "@stencil/core": ">=1.8.0 || ^2.0.0" + "@stencil/core": "^2.9.0" } } } diff --git a/packages/vue-output-target/package.json b/packages/vue-output-target/package.json index dcf160de..a029aec8 100644 --- a/packages/vue-output-target/package.json +++ b/packages/vue-output-target/package.json @@ -1,6 +1,6 @@ { "name": "@stencil/vue-output-target", - "version": "0.5.1", + "version": "0.6.0-0", "description": "Vue output target for @stencil/core components.", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -32,7 +32,7 @@ "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues" }, "peerDependencies": { - "@stencil/core": ">=1.8.0 || ^2.0.0" + "@stencil/core": "^2.9.0" }, "jest": { "transform": { diff --git a/packages/vue-output-target/src/generate-vue-component.ts b/packages/vue-output-target/src/generate-vue-component.ts index 042b3331..968ea3b0 100644 --- a/packages/vue-output-target/src/generate-vue-component.ts +++ b/packages/vue-output-target/src/generate-vue-component.ts @@ -8,7 +8,7 @@ export const createComponentDefinition = ( includeCustomElement: boolean = false ) => (cmpMeta: Pick) => { const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName); - const importAs = (includeCustomElement) ? tagNameAsPascal + 'Cmp' : 'undefined'; + const importAs = (includeCustomElement) ? 'define' + tagNameAsPascal : 'undefined'; let props: string[] = []; diff --git a/packages/vue-output-target/src/output-vue.ts b/packages/vue-output-target/src/output-vue.ts index 75ed4c29..4ecfa8d1 100644 --- a/packages/vue-output-target/src/output-vue.ts +++ b/packages/vue-output-target/src/output-vue.ts @@ -65,7 +65,7 @@ import { defineContainer } from './vue-component-lib/utils';\n`; const cmpImports = components.map(component => { const pascalImport = dashToPascalCase(component.tagName); - return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || + return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage!)}/${outputTarget.customElementsDir || 'components' }/${component.tagName}.js';`; }); diff --git a/packages/vue-output-target/vue-component-lib/utils.ts b/packages/vue-output-target/vue-component-lib/utils.ts index 6f587d1f..4ba80a23 100644 --- a/packages/vue-output-target/vue-component-lib/utils.ts +++ b/packages/vue-output-target/vue-component-lib/utils.ts @@ -51,7 +51,7 @@ const getElementClasses = (ref: Ref, componentClasses: */ export const defineContainer = ( name: string, - customElement: any, + defineCustomElement: any, componentProps: string[] = [], modelProp?: string, modelUpdateEvent?: string, @@ -63,12 +63,8 @@ export const defineContainer = ( * They refer to whatever properties are set on an instance of a component. */ - if ( - customElement !== undefined && - typeof customElements !== 'undefined' && - !customElements.get(name) - ) { - customElements.define(name, customElement); + if (defineCustomElement !== undefined) { + defineCustomElement(); } const Container = defineComponent((props: any, { attrs, slots, emit }) => {