@stencil/react-output-target
Advanced tools
@stencil/react-output-target - npm Package Compare versions
Comparing version 0.7.2-dev.11691686917.1045ccb9 to 0.7.3
| { | ||
| "name": "@stencil/react-output-target", | ||
| "version": "0.7.2-dev.11691686917.1045ccb9", | ||
| "version": "0.7.3", | ||
| "description": "React output target for @stencil/core components.", | ||
| "main": "dist/index.cjs.js", | ||
| "module": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "main": "./dist/react-output-target.js", | ||
| "module": "./dist/react-output-target.js", | ||
| "types": "./dist/react-output-target/index.d.ts", | ||
| "type": "module", | ||
| "files": [ | ||
| "dist/", | ||
| "react-component-lib/" | ||
| "dist/" | ||
| ], | ||
@@ -16,13 +16,14 @@ "publishConfig": { | ||
| "scripts": { | ||
| "prepublishOnly": "npm run build", | ||
| "prebuild": "rimraf ./dist", | ||
| "build": "tsc && npm run rollup", | ||
| "watch": "tsc --watch", | ||
| "rollup": "rollup -c", | ||
| "version": "npm run build", | ||
| "prettier": "npm run prettier.base -- --write", | ||
| "prettier.base": "prettier \"./({react-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"", | ||
| "prettier.dry-run": "npm run prettier.base -- --list-different", | ||
| "prepublishOnly": "pnpm run build", | ||
| "build": "vite build && pnpm run build:dts", | ||
| "build:dts": "tsc -p tsconfig.json", | ||
| "dev": "run-p dev:*", | ||
| "dev:build": "vite build --watch", | ||
| "dev:dts": "tsc -p tsconfig.json --watch --preserveWatchOutput", | ||
| "version": "pnpm run build", | ||
| "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\" --write", | ||
| "release": "np", | ||
| "test": "jest" | ||
| "test": "vitest run", | ||
| "test.watch": "vitest --watch", | ||
| "coverage": "vitest run --coverage" | ||
| }, | ||
@@ -40,29 +41,51 @@ "repository": { | ||
| "peerDependencies": { | ||
| "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" | ||
| "@stencil/core": ">=3 || >= 4.0.0-beta.0 || >= 4.0.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" | ||
| "@types/node": "^20.14.12", | ||
| "@types/react": "^18", | ||
| "@types/react-dom": "^18", | ||
| "npm-run-all2": "^6.2.4", | ||
| "react": "^18.3.1", | ||
| "ts-dedent": "^2.2.0", | ||
| "typescript": "^5.4.4", | ||
| "vite": "^5.0.0", | ||
| "vite-plugin-dts": "^3.8.1", | ||
| "vitest": "^1.4.0" | ||
| }, | ||
| "jest": { | ||
| "transform": { | ||
| "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js" | ||
| "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0", | ||
| "dependencies": { | ||
| "@lit/react": "^1.0.4", | ||
| "html-react-parser": "^5.1.10", | ||
| "react-dom": "^18.3.1", | ||
| "ts-morph": "^22.0.0" | ||
| }, | ||
| "peerDependenciesMeta": { | ||
| "@stencil/core": { | ||
| "optional": false | ||
| } | ||
| }, | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/react-output-target/index.d.ts", | ||
| "node": { | ||
| "default": "./dist/react-output-target.cjs" | ||
| }, | ||
| "default": "./dist/react-output-target.js" | ||
| }, | ||
| "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$", | ||
| "moduleFileExtensions": [ | ||
| "ts", | ||
| "tsx", | ||
| "js", | ||
| "json", | ||
| "jsx" | ||
| ], | ||
| "testURL": "http://localhost" | ||
| }, | ||
| "gitHead": "045ccb908869f12cc45c6f67fb99d1dcf5e23427", | ||
| "volta": { | ||
| "extends": "../../package.json" | ||
| "./runtime": { | ||
| "types": "./dist/react/index.d.ts", | ||
| "browser": { | ||
| "default": "./dist/react.js" | ||
| }, | ||
| "default": "./dist/react.js" | ||
| }, | ||
| "./ssr": { | ||
| "types": "./dist/react/ssr.d.ts", | ||
| "browser": { | ||
| "default": "./dist/ssr.js" | ||
| }, | ||
| "default": "./dist/ssr.js" | ||
| } | ||
| } | ||
| } |
| # @stencil/react-output-target | ||
| Stencil can generate React class component wrappers for your web components. This allows your Stencil components to be used within a React application. The benefits of using Stencil's component wrappers over the standard web components include: | ||
| Automate the creation of React component wrappers for your Stencil web components. | ||
| - Typings for your components | ||
| - JSX bindings for custom events (event names are renamed to match React's convention of `onEventName`) | ||
| - Tag names are renamed to match PascalCase convention. | ||
| - Adds support for property types outside of string and number (supports: functions, objects and arrays). | ||
| This package includes an output target for code generation that allows developers to generate a React component wrapper for each Stencil component and a minimal runtime package built around [@lit/react](https://www.npmjs.com/package/@lit/react) that is required to use the generated React components in your React library or application. | ||
| For a detailed guide on how to add the react output target to a project, visit: https://stenciljs.com/docs/react. | ||
| ## Features | ||
| ## Installation | ||
| - ♻️ Automate the generation of React component wrappers for Stencil components | ||
| - 🌐 Generate React functional component wrappers with JSX bindings for custom events and properties | ||
| - ⌨️ Typings and auto-completion for React components in your IDE | ||
| - 🚀 Support for Server Side Rendering (SSR) when used with frameworks like [Next.js](https://nextjs.org/) | ||
| ## Setup | ||
| ### Your Stencil Component Library | ||
| Install the `@stencil/react-output-target` package in your Stencil project as a development dependency: | ||
| ```bash | ||
| npm install @stencil/react-output-target | ||
| npm install @stencil/react-output-target --save-dev | ||
| ``` | ||
| ## Usage | ||
| Configure the output target in your `stencil.config.ts` file: | ||
| In your `stencil.config.ts` add the following configuration to the `outputTargets` section: | ||
| ```ts | ||
@@ -27,12 +31,9 @@ import { Config } from '@stencil/core'; | ||
| export const config: Config = { | ||
| namespace: 'demo', | ||
| outputTargets: [ | ||
| reactOutputTarget({ | ||
| componentCorePackage: 'component-library', | ||
| proxiesFile: '../component-library-react/src/components.ts', | ||
| // Relative path to where the React components will be generated | ||
| outDir: '../path-to-react-library-or-app/src/', | ||
| }), | ||
| { | ||
| type: 'dist', | ||
| esmLoaderPath: '../loader', | ||
| }, | ||
| // dist-custom-elements output target is required for the React output target | ||
| { type: 'dist-custom-elements' }, | ||
| ], | ||
@@ -42,13 +43,50 @@ }; | ||
| ## Config Options | ||
| Build your Stencil project to generate the React component wrappers: | ||
| | Property | Description | | ||
| | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your React wrappers. | | ||
| | `proxiesFile` | The output file of all the component wrappers generated by the output target. This file path should point to a location within your React library/project. | | ||
| | `excludeComponents` | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior. | | ||
| | `loaderDir` | This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used. | | ||
| | `includePolyfills` | If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`. | | ||
| | `includeDefineCustomElements` | If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`. | | ||
| | `includeImportCustomElements` | If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components. | | ||
| | `customElementsDir` | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`. | | ||
| ```bash | ||
| npm run build | ||
| ``` | ||
| The component wrappers will be generated in the specified output directory. | ||
| ### Your React Application or Library | ||
| Install the `@stencil/react-output-target` runtime package in your React project: | ||
| ```bash | ||
| npm install @stencil/react-output-target | ||
| ``` | ||
| > **Note:** The `@stencil/react-output-target` runtime package is required to use the generated React component wrappers. This package must be a dependency in your React project. | ||
| Verify or update your `tsconfig.json` file to include the following settings: | ||
| ```json | ||
| { | ||
| "compilerOptions": { | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler" | ||
| } | ||
| } | ||
| ``` | ||
| > `moduleResolution": "bundler"` is required to resolve the secondary entry points in the `@stencil/react-output-target` runtime package. You can learn more about this setting in the [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution). | ||
| Verify or install Typescript v5.0 or later in your project: | ||
| ```bash | ||
| npm install typescript@5 --save-dev | ||
| ``` | ||
| That's it! You can now import and use your Stencil components as React components in your React application or library. | ||
| ## Output Target Options | ||
| | Property | Description | | ||
| | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | `outDir` (required) | The directory where the React components will be generated. | | ||
| | `esModules` | If `true`, the output target will generate a separate ES module for each React component wrapper. Defaults to `false`. | | ||
| | `stencilPackageName` | The name of the package that exports the Stencil components. Defaults to the package.json detected by the Stencil compiler. | | ||
| | `excludeComponents` | An array of component tag names to exclude from the React output target. Useful if you want to prevent certain web components from being in the React library. | | ||
| | `customElementsDir` | The directory where the custom elements are saved. This value is automatically detected from the Stencil configuration file for the `dist-custom-elements` output target. If you are working in an environment that uses absolute paths, consider setting this value manually. | | ||
| | `hydrateModule` | For server side rendering support, provide the package for importing the [Stencil Hydrate module](https://stenciljs.com/docs/hydrate-app#hydrate-app), e.g. `my-package/hydrate`. This will generate two files: a `component.server.ts` which defines all component wrappers and a `components.ts` that re-exports these components for importing in your application. | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by937.39%
756452
- Lines of code
- increased by822.13%
13417
- Number of lines in readme file
- increased by71.7%
91
- Number of low supply chain risk alerts
- decreased by-100%
0
- Is type module
Yes
Worsened metrics
- Dependency count
- increased by400%
5
- Dev dependency count
- increased by100%
10
- Number of package files
- decreased by-13.64%
19
- Number of low license alerts
- increased byInfinity%
1
- Number of low quality alerts
- increased by200%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@lit/react@^1.0.4
+ Addedhtml-react-parser@^5.1.10
+ Addedreact-dom@^18.3.1
+ Addedts-morph@^22.0.0
+ Added@lit/react@1.0.6(transitive)
+ Added@nodelib/fs.scandir@2.1.5(transitive)
+ Added@nodelib/fs.stat@2.0.5(transitive)
+ Added@nodelib/fs.walk@1.2.8(transitive)
+ Added@ts-morph/common@0.23.0(transitive)
+ Added@types/prop-types@15.7.14(transitive)
+ Added@types/react@18.3.18(transitive)
+ Addedbalanced-match@1.0.2(transitive)
+ Addedbrace-expansion@2.0.1(transitive)
+ Addedbraces@3.0.3(transitive)
+ Addedcode-block-writer@13.0.3(transitive)
+ Addedcsstype@3.1.3(transitive)
+ Addeddom-serializer@2.0.0(transitive)
+ Addeddomelementtype@2.3.0(transitive)
+ Addeddomhandler@5.0.3(transitive)
+ Addeddomutils@3.2.2(transitive)
+ Addedentities@4.5.06.0.0(transitive)
+ Addedfast-glob@3.3.3(transitive)
+ Addedfastq@1.18.0(transitive)
+ Addedfill-range@7.1.1(transitive)
+ Addedglob-parent@5.1.2(transitive)
+ Addedhtml-dom-parser@5.0.13(transitive)
+ Addedhtml-react-parser@5.2.2(transitive)
+ Addedhtmlparser2@10.0.0(transitive)
+ Addedinline-style-parser@0.2.4(transitive)
+ Addedis-extglob@2.1.1(transitive)
+ Addedis-glob@4.0.3(transitive)
+ Addedis-number@7.0.0(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedmerge2@1.4.1(transitive)
+ Addedmicromatch@4.0.8(transitive)
+ Addedminimatch@9.0.5(transitive)
+ Addedmkdirp@3.0.1(transitive)
+ Addedpath-browserify@1.0.1(transitive)
+ Addedpicomatch@2.3.1(transitive)
+ Addedqueue-microtask@1.2.3(transitive)
+ Addedreact@18.3.119.0.0(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedreact-property@2.0.2(transitive)
+ Addedreusify@1.0.4(transitive)
+ Addedrun-parallel@1.2.0(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addedstyle-to-js@1.1.16(transitive)
+ Addedstyle-to-object@1.0.8(transitive)
+ Addedto-regex-range@5.0.1(transitive)
+ Addedts-morph@22.0.0(transitive)