├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── components │ ├── index.ts │ └── stencil-generated │ │ └── index.ts └── index.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | # Produced build files 64 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Ionic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stencil-ds-react-template 2 | 3 | ⚠️ This project has been archived. ⚠️ 4 | 5 | This project is no longer actively maintained. 6 | 7 | Please see the [Stencil documentation for using the React Framework Wrapper](https://stenciljs.com/docs/react) for instructions as to how to use [`@stencil/react-output-target`](https://www.npmjs.com/package/@stencil/react-output-target) 8 | 9 | --- 10 | 11 | This is an example repo of building plugins. 12 | 13 | ## Step 1. 14 | 15 | - Update the `package.json` to have the correct package name for this repo. 16 | - Replace `component-library` under `dependencies` with your core stencil package name. 17 | 18 | ## Step 2. 19 | 20 | - Build your core stencil package. 21 | 22 | ## Step 3. 23 | 24 | - Run build on this package. 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "component-library-react", 3 | "sideEffects": false, 4 | "version": "0.0.1", 5 | "private": true, 6 | "description": "React specific wrapper for component-library", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/ionic-team/ionic.git" 10 | }, 11 | "scripts": { 12 | "build": "npm run clean && npm run compile", 13 | "clean": "rm -rf dist", 14 | "compile": "npm run tsc", 15 | "tsc": "tsc -p .", 16 | "rollup": "rollup -c" 17 | }, 18 | "main": "./dist/index.js", 19 | "module": "./dist/index.js", 20 | "types": "./dist/index.d.ts", 21 | "files": [ 22 | "dist/" 23 | ], 24 | "devDependencies": { 25 | "@types/jest": "23.3.9", 26 | "@types/node": "^15.12.2", 27 | "@types/react": "^17.0.34", 28 | "@types/react-dom": "^17.0.11", 29 | "jest": "^23.0.0", 30 | "jest-dom": "^3.0.2", 31 | "np": "^3.1.0", 32 | "react": "^17.0.2", 33 | "react-dom": "^17.0.2", 34 | "typescript": "^3.3.4000" 35 | }, 36 | "dependencies": { 37 | }, 38 | "peerDependencies": { 39 | "react": "^17.0.2", 40 | "react-dom": "^17.0.2" 41 | }, 42 | "jest": { 43 | "preset": "ts-jest", 44 | "setupTestFrameworkScriptFile": "/jest.setup.js", 45 | "testPathIgnorePatterns": [ 46 | "node_modules", 47 | "dist" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./stencil-generated/index"; 2 | -------------------------------------------------------------------------------- /src/components/stencil-generated/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | auto-generated react proxies will replace this file 4 | if you use "../your-react-library-name/src/components/stencil-generated/index.ts" for your proxies target: 5 | 6 | */ 7 | 8 | /* SAMPLE: 9 | import { reactOutputTarget as react } from '@stencil/react-output-target' 10 | 11 | export const config: Config = { 12 | outputTargets: [ 13 | react({ 14 | componentCorePackage: 'your-stencil-library-name', 15 | proxiesFile: '../your-react-library-name/src/components/stencil-generated/index.ts', 16 | includeDefineCustomElements: true, 17 | }); 18 | { 19 | type: 'dist', 20 | esmLoaderPath: '../loader', 21 | }, 22 | { 23 | type: 'dist-custom-elements', 24 | dir: "./dist/custom-elements" 25 | }, 26 | ], 27 | } 28 | */ 29 | 30 | export const object = {}; 31 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowUnreachableCode": false, 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "esModuleInterop": true, 9 | "lib": ["dom", "es2015"], 10 | "module": "es2015", 11 | "moduleResolution": "node", 12 | "noImplicitAny": true, 13 | "noImplicitReturns": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "outDir": "dist", 17 | "removeComments": false, 18 | "sourceMap": true, 19 | "jsx": "react", 20 | "target": "es2015" 21 | }, 22 | "include": [ 23 | "src/**/*.ts", 24 | "src/**/*.tsx" 25 | ], 26 | "exclude": [ 27 | "**/__tests__/**" 28 | ], 29 | "compileOnSave": false, 30 | "buildOnSave": false 31 | } --------------------------------------------------------------------------------