├── .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 | <div align="center">
 2 |   <img src="https://github.com/preactjs-templates/widget/blob/master/readme-logo.png?raw=true" height=300px>
 3 |   <br />
 4 |   <br />
 5 |   <h1>Preact Widget Template</h1>
 6 | </div>
 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 <zouhir@zouhir.org>",
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 |       "<rootDir>/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 |     <div>
 8 |       <h1 style={{ color: props.color }}>Hello, World!</h1>
 9 |     </div>
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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title><% preact.title %></title>
 6 | 		<meta name="viewport" content="width=device-width,initial-scale=1">
 7 | 		<style>
 8 | 			.preview {
 9 | 				width: 100%;
10 | 				max-width: 1100px;
11 | 				margin: 80px auto;
12 | 				border: 1px dashed rgba(0, 0, 0, 0.2);
13 | 				position: relative;
14 | 			}
15 | 
16 | 			.preview::before {
17 | 				content: 'WIDGET PREVIEW';
18 | 				position: absolute;
19 | 				display: block;
20 | 				top: -18px;
21 | 				font-size: 11px;
22 | 				color: rgba(0, 0, 0, 0.5);
23 | 			}
24 | 		</style>
25 | 		<% preact.headEnd %>
26 | 	</head>
27 | 	<body>
28 | 		<div data-widget-host="habitat" class="preview">
29 | 			<script type="text/props">
30 | 			  { "color": "red"}
31 | 			</script>
32 | 		</div>
33 | 		<% preact.bodyEnd %>
34 | 	</body>
35 | </html>
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(<Hello />);
 9 |     expect(tree.find("h1").text()).toBe("Hello, World!");
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------