feat: fork target

packages/core/package.json

@@ -10,31 +10,11 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/baccie/baccie.esm.js",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/index.cjs.js"
-      }
-    },
-    "./loader": {
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
-    },
-    "./components/*": {
-      "import": "./components/*",
-      "require": "./components/*",
-      "types": "./dist/types/components.d.ts"
-    }
-  },
   "files": [
     "components/",
     "dist/",
-    "loader/"
+    "loader/",
+    "hydrate"
   ],
   "scripts": {
     "build": "stencil build",
@@ -52,7 +32,9 @@
     "@stencil/store": "^2.0.11"
   },
   "devDependencies": {
+    "@ikunorg/react-output-target": "workspace:^",
     "@ikunorg/svelte-output-target": "workspace:^",
+    "@ikunorg/vue-output-target": "workspace:^",
     "@types/jest": "^29.5.10",
     "@types/node": "^20.10.0",
     "jest": "^29.7.0",

packages/core/stencil.config.ts

@@ -1,8 +1,8 @@
 import { Config } from '@stencil/core';
 import { stencilCachePath, stencilWWWPath } from '../../scripts/paths';
 import { sass } from '@stencil/sass';
-import { vueOutputTarget } from '@stencil/vue-output-target';
-import { reactOutputTarget } from '@stencil/react-output-target';
+import { vueOutputTarget } from '@ikunorg/vue-output-target';
+import { reactOutputTarget } from '@ikunorg/react-output-target';
 import { svelteOutputTarget } from '@ikunorg/svelte-output-target';
 
 export const config: Config = {

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

@@ -0,0 +1,241 @@
+import { ComponentCompilerMeta, Config } from '@stencil/core/internal';
+import { createComponentDefinition, generateProxies, getPathToCorePackageLoader } from '../src/output-react';
+import { PackageJSON, OutputTargetReact } from '../src/types';
+
+describe('createComponentDefinition', () => {
+  it('should create a React component with custom element support', () => {
+    const output = createComponentDefinition(
+      {
+        properties: [],
+        tagName: 'my-component',
+        methods: [],
+        events: [],
+      },
+      true
+    );
+    expect(output[0]).toEqual(
+      `export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component', undefined, undefined, defineMyComponent);`
+    );
+  });
+
+  it('should create a React component without custom element support', () => {
+    const output = createComponentDefinition({
+      properties: [],
+      tagName: 'my-component',
+      methods: [],
+      events: [],
+    });
+    expect(output[0]).toEqual(
+      `export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('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 defineCustomElements when both are true in the outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: true,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-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: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-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: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includePolyfills: false,
+      includeDefineCustomElements: false,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from 'component-library';
+
+
+
+
+`
+    );
+  });
+
+  it('should include importCustomElements if true in the outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/src/proxies.ts',
+      includeImportCustomElements: true,
+    };
+
+    const finalText = generateProxies(config, components, pkgData, outputTarget, rootDir);
+    expect(finalText).toEqual(
+      `/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from 'component-library/components';
+
+
+
+
+`
+    );
+  });
+
+  it('should include importCustomElements with custom path if defined in outputTarget', () => {
+    const outputTarget: OutputTargetReact = {
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-react/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 react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from 'component-library/custom-dir/hello';
+
+
+
+
+`
+    );
+  });
+});
+
+describe('getPathToCorePackageLoader', () => {
+  let config: Config;
+  let outputTarget: OutputTargetReact;
+
+  beforeEach(() => {
+    config = { outputTargets: [], rootDir: '/User/app/root' };
+    outputTarget = {
+      componentCorePackage: 'my-library',
+      proxiesFile: '../my-library-react/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/react-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);
+  });
+});

packages/react-output-target/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ikunorg/react-output-target",
+  "version": "0.0.0",
+  "description": "React output target for @stencil/core components.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm tsup",
+    "start": "pnpm tsup --watch",
+    "clean": "pnpm rimraf .turbo node_modules dist"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@stencil/core": "^4.8.0"
+  },
+  "devDependencies": {
+    "@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"
+  },
+  "config": {
+    "publish": true
+  }
+}