chore: restructure packages (#493)

* chore: re-org package structure

* update deps in next project

* lerna change

* add back missing components dir

* fix tests

* fix react tests

* fix types

* run headless

* ignore React type mismatch

* build nextjs project alongside other projects

* update unit test

* fix(react): don't populate non-primitive objects (#498)

* chore: re-org package structure

* fix(react): don't populate non-primitive objects

* test(vue): add playground for Vite+Vue (#499)

* test(vue): add playground for Vite+Vue

* ignore type issue

.github/workflows/prod-build.yml

@@ -72,5 +72,5 @@ jobs:
  # Look at package.json's name
  # Coupled to project structure. Update this when adding a new output target.
  # Examples: vue-output-target, angular-output-target, react-output-target
- working-directory: './packages/${{ inputs.package }}-output-target' # Follow the repo structure
+ working-directory: './packages/${{ inputs.package }}' # Follow the repo structure
  token: ${{ secrets.NPM_TOKEN }} # Private, accessible by team leads

.gitignore

@@ -8,4 +8,5 @@ build/
 .npmrc
 *.tgz
 *.lerna_backup
-packages/example-project/component-library/hydrate
+example-project/component-library/hydrate
+example-project/component-library/components

example-project/component-library-react/package.json

@@ -0,0 +1,43 @@
+{
+ "name": "component-library-react",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "prettier": "pnpm run prettier.base --write",
+ "prettier.base": "prettier \"./({src,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
+ "prettier.dry-run": "pnpm run prettier.base --list-different",
+ "preview": "vite preview",
+ "test": "wdio run ./wdio.conf.ts"
+ },
+ "dependencies": {
+ "@stencil/react-output-target": "workspace:*",
+ "component-library": "workspace:*",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "@types/react": "^18",
+ "@types/react-dom": "^18",
+ "@types/mocha": "^10.0.9",
+ "@typescript-eslint/eslint-plugin": "^8.8.1",
+ "@typescript-eslint/parser": "^8.8.1",
+ "@vitejs/plugin-react": "^4.3.2",
+ "@wdio/cli": "^9.1.5",
+ "@wdio/globals": "^9.1.5",
+ "@wdio/mocha-framework": "^9.1.3",
+ "@wdio/spec-reporter": "^9.1.3",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.2",
+ "eslint-plugin-react-refresh": "^0.4.12",
+ "expect-webdriverio": "^5.0.3",
+ "react": "^18.3.1",
+ "tsx": "^4.19.1",
+ "typescript": "^5.6.3",
+ "vite": "^5.4.8",
+ "wdio-vite-service": "^1.0.9",
+ "webdriverio": "^9.1.5"
+ }
+}

packages/example-project/component-library-react/src/components.ts → example-project/component-library-react/src/components.ts

@@ -66,6 +66,7 @@ export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> =
 >({
  tagName: 'my-button',
  elementClass: MyButtonElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyFocus: 'myFocus',
@@ -86,6 +87,7 @@ export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEven
 >({
  tagName: 'my-checkbox',
  elementClass: MyCheckboxElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyChange: 'myChange',
@@ -103,6 +105,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
 >({
  tagName: 'my-component',
  elementClass: MyComponentElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: { onMyCustomEvent: 'myCustomEvent' } as MyComponentEvents,
  defineCustomElement: defineMyComponent,
@@ -121,6 +124,7 @@ export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = /*@
 >({
  tagName: 'my-input',
  elementClass: MyInputElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyInput: 'myInput',
@@ -144,6 +148,7 @@ export const MyPopover: StencilReactComponent<MyPopoverElement, MyPopoverEvents>
 >({
  tagName: 'my-popover',
  elementClass: MyPopoverElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyPopoverDidPresent: 'myPopoverDidPresent',
@@ -166,6 +171,7 @@ export const MyRadio: StencilReactComponent<MyRadioElement, MyRadioEvents> = /*@
 >({
  tagName: 'my-radio',
  elementClass: MyRadioElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyFocus: 'myFocus',
@@ -181,6 +187,7 @@ export const MyRadioGroup: StencilReactComponent<MyRadioGroupElement, MyRadioGro
  /*@__PURE__*/ createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
  tagName: 'my-radio-group',
  elementClass: MyRadioGroupElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
  defineCustomElement: defineMyRadioGroup,
@@ -198,6 +205,7 @@ export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = /*@
 >({
  tagName: 'my-range',
  elementClass: MyRangeElement,
+ // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
  react: React,
  events: {
  onMyChange: 'myChange',

example-project/component-library-react/tests/test.e2e.ts

@@ -0,0 +1,14 @@
+/// <reference types="webdriverio" />
+import { expect, $, $$, browser } from '@wdio/globals';
+
+describe('Stencil NextJS Integration', () => {
+ before(() => browser.url('/'));
+
+ it('should allow to interact with input element', async () => {
+ await $('my-input').$('input').setValue('Hello World');
+ await expect(await $$('p').map((p) => p.getText())).toEqual([
+ 'Input Event: Hello World',
+ 'Change Event: Hello World'
+ ]);
+ });
+});

packages/example-project/component-library-react/tsconfig.json → example-project/component-library-react/tsconfig.json

@@ -18,8 +18,9 @@
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "skipDefaultLibCheck": true
  },
- "include": ["src"],
+ "include": ["src", "tests"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }