├── .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 |
--------------------------------------------------------------------------------