Feat/add solid output target

lerna.json

@@ -3,11 +3,13 @@
     "packages/angular-output-target",
     "packages/react-output-target",
     "packages/vue-output-target",
+    "packages/solid-output-target",
     "packages/svelte-output-target",
     "packages/example-project/component-library",
     "packages/example-project/component-library-angular",
     "packages/example-project/component-library-react",
     "packages/example-project/component-library-vue",
+    "packages/example-project/component-library-solid",
     "packages/example-project/component-library-svelte"
   ],
   "version": "0.6.0",

packages/example-project/component-library/stencil.config.ts

@@ -1,6 +1,7 @@
 import { Config } from '@stencil/core';
 import { angularOutputTarget, ValueAccessorConfig } from '@stencil/angular-output-target';
 import { reactOutputTarget } from '@stencil/react-output-target';
+// import { solidOutputTarget } from '@stencil/solid-output-target';
 import { vueOutputTarget, ComponentModelConfig } from '@stencil/vue-output-target';
 import { svelteOutputTarget, ComponentBindingConfig } from '@stencil/svelte-output-target';
 
@@ -81,6 +82,10 @@ export const config: Config = {
       componentCorePackage: 'component-library',
       proxiesFile: '../component-library-react/src/components.ts',
     }),
+    // solidOutputTarget({
+    //   componentCorePackage: 'component-library',
+    //   proxiesFile: '../component-library-solid/src/components.ts',
+    // }),
     vueOutputTarget({
       componentCorePackage: 'component-library',
       proxiesFile: '../component-library-vue/src/proxies.ts',

packages/solid-output-target/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-present Drifty Co.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/solid-output-target/README.md

@@ -0,0 +1,3 @@
+# @stencil/solid-output-target
+
+This is an output plugin for stencil.

packages/solid-output-target/__tests__/generate-solid-components.spec.ts

@@ -0,0 +1,234 @@
+import { ComponentCompilerMeta, Config } from '@stencil/core/internal';
+import { createComponentDefinition, generateProxies, getPathToCorePackageLoader } from '../src/output-solid';
+import { PackageJSON, OutputTargetSolid } from '../src/types';
+
+describe('createComponentDefinition', () => {
+  it('should create a Solid component with custom element support', () => {
+    const output = createComponentDefinition({
+      properties: [],
+      tagName: 'my-component',
+      methods: [],
+      events: [],
+    }, true);
+    expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createSolidComponent<JSX.MyComponent>('my-component', undefined, undefined, MyComponentCmp);`);
+  });
+
+  it('should create a Solid component without custom element support', () => {
+    const output = createComponentDefinition({
+      properties: [],
+      tagName: 'my-component',
+      methods: [],
+      events: [],
+    });
+    expect(output[0]).toEqual(`export const MyComponent = /*@__PURE__*/createSolidComponent<JSX.MyComponent>('my-component');`);
+  });
+});
+
+describe('generateProxies', () => {
+  const components: ComponentCompilerMeta[] = [];
+  const pkgData: PackageJSON = {
+    types: 'dist/types/index.d.ts',
+  };
+  const rootDir: string = '';
+  const config: Config = { outputTargets: [] };
+
+  it('should include both polyfills and definCustomElements when both are true in the outputTarget', () => {
+    const outputTarget: OutputTargetSolid = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-solid/src/proxies.ts',
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated solid proxies */
+import { createSolidComponent } from './solid-component-lib';
+
+import type { JSX } from 'component-library';
+
+import { applyPolyfills, defineCustomElements } from 'component-library/dist/loader';
+
+applyPolyfills().then(() => defineCustomElements());
+
+`,
+    );
+  });
+
+  it('should include only defineCustomElements when includePolyfills is false in the outputTarget', () => {
+    const outputTarget: OutputTargetSolid = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-solid/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated solid proxies */
+import { createSolidComponent } from './solid-component-lib';
+
+import type { JSX } from 'component-library';
+
+import { defineCustomElements } from 'component-library/dist/loader';
+
+defineCustomElements();
+
+`,
+    );
+  });
+
+  it('should not include defineCustomElements or applyPolyfills if both are false in the outputTarget', () => {
+    const outputTarget: OutputTargetSolid = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-solid/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: false,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated solid proxies */
+import { createSolidComponent } from './solid-component-lib';
+
+import type { JSX } from 'component-library';
+
+
+
+
+`,
+    );
+  });
+
+  it('should include importCustomElements if true in the outputTarget', () => {
+    const outputTarget: OutputTargetSolid = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-solid/src/proxies.ts',
+      includeImportCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated solid proxies */
+import { createSolidComponent } from './solid-component-lib';
+
+import type { JSX } from 'component-library/components';
+
+
+
+
+`,
+    );
+  });
+
+  it('should include importCustomElements with custom path if defined in outputTarget', () => {
+    const outputTarget: OutputTargetSolid = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-solid/src/proxies.ts',
+      includeImportCustomElements: true,
+      customElementsDir: 'custom-dir/hello'
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated solid proxies */
+import { createSolidComponent } from './solid-component-lib';
+
+import type { JSX } from 'component-library/custom-dir/hello';
+
+
+
+
+`,
+    );
+  });
+});
+
+describe('getPathToCorePackageLoader', () => {
+  let config: Config;
+  let outputTarget: OutputTargetSolid;
+
+  beforeEach(() => {
+    config = { outputTargets: [], rootDir: '/User/app/root' };
+    outputTarget = {
+      componentCorePackage: 'my-library',
+      proxiesFile: '../my-library-solid/src/proxies.ts',
+    };
+  });
+
+  it('should use default w/ null output targets', () => {
+    config.outputTargets = null;
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/dist/loader');
+  });
+
+  it('should use default w/ no output targets', () => {
+    config.outputTargets = [];
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/dist/loader');
+  });
+
+  it('should use default w/ no dist output target', () => {
+    config.outputTargets = [
+      {
+        type: 'www',
+      },
+    ];
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/dist/loader');
+  });
+
+  it('should use default w/ dist output target but no esmLoaderPath', () => {
+    config.outputTargets = [
+      {
+        type: 'dist',
+      },
+    ];
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/dist/loader');
+  });
+
+  it('should use default w/ dist output target esmLoaderPath not absolute path', () => {
+    config.outputTargets = [
+      {
+        type: 'dist',
+        esmLoaderPath: '../custom-loader-dir',
+      },
+    ];
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/dist/loader');
+  });
+
+  it('should use esmLoaderPath from dist output target that is an absolute path', () => {
+    config.outputTargets = [
+      {
+        type: 'dist',
+        esmLoaderPath: '/User/app/root/custom-loader-dir',
+      },
+    ];
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/custom-loader-dir');
+  });
+
+  it('should use loaderDir', () => {
+    config.outputTargets = [
+      {
+        type: 'dist',
+        esmLoaderPath: '/User/app/root/custom-loader-dir',
+      },
+    ];
+    outputTarget.loaderDir = 'my-loader-dir';
+    const p = getPathToCorePackageLoader(config, outputTarget);
+    expect(p).toBe('my-library/my-loader-dir');
+  });
+});

packages/solid-output-target/__tests__/plugin.spec.ts

@@ -0,0 +1,56 @@
+import { Config } from '@stencil/core/internal';
+import { OutputTargetReact } from '../src/types';
+import { normalizeOutputTarget } from '../src/plugin';
+
+describe('normalizeOutputTarget', () => {
+  const config: Config = {
+    rootDir: '/dev/',
+  };
+
+  it('should return fail if proxiesFile is not set', () => {
+    expect(() => {
+      normalizeOutputTarget({}, {});
+    }).toThrow(new Error('rootDir is not set and it should be set by stencil itself'));
+  });
+
+  it('should return fail if proxiesFile is not set', () => {
+    expect(() => {
+      normalizeOutputTarget(config, {});
+    }).toThrow(new Error('proxiesFile is required'));
+  });
+
+  it('should return defaults for excludedComponents, includePolyfills, and includeDefineCustomElements', () => {
+    const results: OutputTargetReact = normalizeOutputTarget(config, {
+      proxiesFile: '../component-library-react/src/components.ts',
+    });
+
+    expect(results).toEqual({
+      proxiesFile: '../component-library-react/src/components.ts',
+      excludeComponents: [],
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    } as OutputTargetReact);
+  });
+
+  it('Polyfills and DefinCustomElements should be false when set that way', () => {
+    const results: OutputTargetReact = normalizeOutputTarget(config, {
+      proxiesFile: '../component-library-react/src/components.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: false,
+    });
+
+    expect(results.includeDefineCustomElements).toEqual(false);
+    expect(results.includeDefineCustomElements).toEqual(false);
+  });
+
+  it('Polyfills and DefinCustomElements should be true when set that way', () => {
+    const results: OutputTargetReact = normalizeOutputTarget(config, {
+      proxiesFile: '../component-library-react/src/components.ts',
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    });
+
+    expect(results.includeDefineCustomElements).toEqual(true);
+    expect(results.includeDefineCustomElements).toEqual(true);
+  });
+});