React Integration - the build doesn't include web component files about stencil-site HOT 4 OPEN

Yes, I would do the example with Rollup as the build system for the React library. I think it is the most commonly used. And the react app using the react library I would do it with Vite. I think a bit the same, today is used a lot.

Oh, and I would differentiate the targets with one full example for each target. Why I would use one target and not the other? those explanations would be lovely. I know you have a targets section but wasn't clear enough for me. The examples would help.

Lastly in the react integration would be super nice to explain how is configured the package.json exports.

from stencil-site.

Hi, I manage to ship a StencilJS component and a react wrapper

The component is a iframe wrapper that syncs fields between the react app and the iframe

Here is the live demo:
https://latitude-embed.vercel.app/embedding

The code is here

1. webcomponent
2. react library
3. React app using react library

This is the config

// ./packages/client/webcomponents/stencil.config.ts
import { Config } from '@stencil/core'
import { reactOutputTarget } from '@stencil/react-output-target'

// NOTE: `externalRuntime: false` why?
// Docs: https://stenciljs.com/docs/custom-elements#externalruntime
// This compile in this package `@stencil/core`. Other option would be
// to do it in `@latitude-data/react` by requiring as dependency `@stencil/core`
// But for now because we only have one component I think is fine to ship it here.
// so it has the runtime
export const config: Config = {
  namespace: 'webcomponents',
  outputTargets: [
    { type: 'docs-readme' },
    { type: 'dist' },
    {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'single-export-module',
      generateTypeDeclarations: true,
      externalRuntime: false,
    },
    reactOutputTarget({
      componentCorePackage: '@latitude-data/webcomponents',
      proxiesFile: '../react/src/webcomponents/index.ts',
      customElementsDir: 'dist/components',
      includeImportCustomElements: true,
    }),
  ],
  testing: {
    browserHeadless: 'new',
  },
}

And very important the config for packages/client/webcomponents/package.json

  "main": "./dist/index.cjs.js",
  "module": "./dist/index.js",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/webcomponents/webcomponents.esm.js",
  "types": "./dist/components/index.d.ts",
  "exports": {
    "./dist/loader": {
      "import": "./dist/loader/index.js",
      "types": "./dist/loader/index.d.ts"
    },
    "./dist/components": {
      "import": "./dist/components/index.js",
      "types": "./dist/components/index.d.ts"
    },
    "./dist/components/latitude-embed.js": {
      "import": "./dist/components/latitude-embed.js",
      "types": "./dist/types/components.d.ts"
    }
  },
  "files": [
    "dist/"
  ],

I hope this can help

from stencil-site.

Hi, thank you for your comment!
I managed to make it work differently too, but I think the documentation should contain a working example so that it could be used as a reference for everyone :)

from stencil-site.

@andresgutgon is there anything you believe we can improve in our docs to be more clear on shipping StencilJS components with React wrappers?

from stencil-site.