├── .gitignore ├── LICENSE ├── README.md ├── readme-logo.png └── template ├── .gitignore ├── README.md ├── package.json ├── src ├── component.js ├── index.js ├── style.css └── template.html └── tests ├── __mocks__ └── setupTests.js └── index.test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.lock 4 | *.log 5 | template/package-lock.json 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Preact CLI Templates 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |

Preact Widget Template

6 |
7 | 8 | ## Overview 9 | - This is template for creating a Preact widget or a component library 10 | - [Preact-CLI](https://github.com/preactjs/preact-cli): Used for running a local development environment to use your widget in 11 | - [Microbundle](https://github.com/developit/microbundle): Used for bundling your widget/library for use in other Preact web apps 12 | - [Preact](https://preactjs.com/): General information about how to work with Preact, not specific to this template 13 | 14 | ## Usage 15 | 16 | ``` 17 | $ npx preact-cli create widget my-widget 18 | $ cd my-widget 19 | $ npm install 20 | $ npm run dev 21 | ``` 22 | 23 | Development server runs on port `8080`. If the default port is already in use on 24 | your machine, it will start the development server on a random port. 25 | 26 | ## Commands 27 | - `npm install`: Installs dependencies 28 | 29 | - `npm run dev`: Run a development server with Preact-CLI to test your widget 30 | 31 | - `npm run build:widget`: NPM-ready build with Microbundle, to distribute your widget to be consumed by other Preact web applications 32 | 33 | - `npm run build:lib`: NPM-ready build with Microbundle, to distribute your component as a Preact component library 34 | 35 | - `npm run lint`: Lint files use ESLint 36 | 37 | - `npm run test`: Run Jest and Enzyme with 38 | [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for 39 | your tests 40 | 41 | ### How to Test 42 | 43 | The `widget` template provides a basic test setup with Jest, Enzyme and 44 | [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure). 45 | You are free to change Enzyme with any other testing library 46 | (eg. [Preact Testing Library](https://testing-library.com/docs/preact-testing-library/intro)). 47 | 48 | You can run all additional Jest CLI commands with the `npm run test` command as 49 | described in the 50 | [Jest docs](https://facebook.github.io/jest/docs/en/cli.html#using-with-npm-scripts). 51 | For example, running jest in watch mode would be : 52 | 53 | - `npm run test -- --watch` instead of `jest --watch` 54 | -------------------------------------------------------------------------------- /readme-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preactjs-templates/widget/22e0bf79f42e2f0f69ff9e698124890136b332b7/readme-logo.png -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | build 4 | dist -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | ## CLI Commands 4 | 5 | ``` bash 6 | # install dependencies 7 | npm install 8 | 9 | # serve with hot reload at localhost:8080 10 | npm run dev 11 | 12 | # build npm ready bundles to be consumed by other Preact web apps 13 | npm run build:widget 14 | 15 | # build npm ready bundles to be used as a component library 16 | npm run build:lib 17 | 18 | # lint the project with eslint to find code style issues 19 | npm run lint 20 | 21 | # run tests with jest and enzyme 22 | npm run test 23 | ``` 24 | 25 | For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/preactjs/preact-cli/blob/master/README.md). 26 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "version": "0.1.0", 4 | "description": "", 5 | "source": "src/index.js", 6 | "main": "dist/index.js", 7 | "module": "dist/index.module.js", 8 | "umd:main": "dist/index.umd.js", 9 | "scripts": { 10 | "dev": "preact watch", 11 | "build:widget": "microbundle build", 12 | "build:lib": "microbundle build -i src/component.js", 13 | "lint": "eslint '{src,test}/**/*.js'", 14 | "test": "jest" 15 | }, 16 | "files": [ 17 | "dist" 18 | ], 19 | "eslintConfig": { 20 | "extends": "preact", 21 | "ignorePatterns": [ 22 | "build/" 23 | ] 24 | }, 25 | "author": "Zouhir ", 26 | "license": "MIT", 27 | "peerDependencies": { 28 | "preact": "^10.5.7" 29 | }, 30 | "devDependencies": { 31 | "enzyme": "^3.11.0", 32 | "enzyme-adapter-preact-pure": "^3.3.0", 33 | "eslint": "^7.32.0", 34 | "eslint-config-preact": "^1.1.3", 35 | "jest": "^27.3.1", 36 | "jest-preset-preact": "^4.0.2", 37 | "microbundle": "^0.14.1", 38 | "preact": "^10.5.7", 39 | "preact-cli": "^3.0.5", 40 | "preact-habitat": "^3.3.0", 41 | "preact-render-to-string": "^5.1.12" 42 | }, 43 | "jest": { 44 | "preset": "jest-preset-preact", 45 | "setupFiles": [ 46 | "/tests/__mocks__/setupTests.js" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /template/src/component.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | 3 | import "./style.css"; 4 | 5 | export default function App(props) { 6 | return ( 7 |
8 |

Hello, World!

9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /template/src/index.js: -------------------------------------------------------------------------------- 1 | import habitat from "preact-habitat"; 2 | 3 | import Widget from "./component"; 4 | 5 | let _habitat = habitat(Widget); 6 | 7 | _habitat.render({ 8 | selector: '[data-widget-host="habitat"]', 9 | clean: true 10 | }); 11 | -------------------------------------------------------------------------------- /template/src/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font: 14px/1.21 'Helvetica Neue', arial, sans-serif; 3 | font-weight: 400; 4 | } 5 | 6 | h1 { 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /template/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <% preact.title %> 6 | 7 | 25 | <% preact.headEnd %> 26 | 27 | 28 |
29 | 32 |
33 | <% preact.bodyEnd %> 34 | 35 | 36 | -------------------------------------------------------------------------------- /template/tests/__mocks__/setupTests.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-preact-pure'; 3 | 4 | configure({ 5 | adapter: new Adapter() 6 | }); -------------------------------------------------------------------------------- /template/tests/index.test.js: -------------------------------------------------------------------------------- 1 | import { h } from "preact"; 2 | import { shallow } from 'enzyme'; 3 | 4 | import Hello from "../src/component"; 5 | 6 | describe("Hello Snapshot", () => { 7 | test("should render header with content", () => { 8 | const tree = shallow(); 9 | expect(tree.find("h1").text()).toBe("Hello, World!"); 10 | }); 11 | }); 12 | --------------------------------------------------------------------------------