diff options
Diffstat (limited to '@linaria/examples/Preact/preact-example')
26 files changed, 364 insertions, 0 deletions
diff --git a/@linaria/examples/Preact/preact-example/.gitignore b/@linaria/examples/Preact/preact-example/.gitignore new file mode 100644 index 0000000..3fb8754 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/.gitignore @@ -0,0 +1,6 @@ +node_modules +/build +/*.log +*.lock + +package-lock.json
\ No newline at end of file diff --git a/@linaria/examples/Preact/preact-example/README.md b/@linaria/examples/Preact/preact-example/README.md new file mode 100644 index 0000000..8569ba2 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/README.md @@ -0,0 +1,22 @@ +# my-project + +## CLI Commands + +``` bash +# install dependencies +npm install + +# serve with hot reload at localhost:8080 +npm run dev + +# build for production with minification +npm run build + +# test the production build locally +npm run serve + +# run tests with jest and preact-render-spy +npm run test +``` + +For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md). diff --git a/@linaria/examples/Preact/preact-example/package.json b/@linaria/examples/Preact/preact-example/package.json new file mode 100644 index 0000000..b2fd234 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/package.json @@ -0,0 +1,45 @@ +{ + "private": true, + "name": "preact-example", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "build": "preact build", + "serve": "sirv build --cors --single", + "dev": "preact watch", + "lint": "eslint src", + "test": "jest" + }, + "eslintConfig": { + "extends": "preact", + "ignorePatterns": [ + "build/" + ] + }, + "devDependencies": { + "@babel/preset-react": "^7.9.4", + "enzyme": "^3.10.0", + "enzyme-adapter-preact-pure": "^2.0.0", + "eslint": "^6.0.1", + "eslint-config-preact": "^1.1.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^24.9.0", + "jest-preset-preact": "^1.0.0", + "preact-cli": "^3.0.0-rc.6", + "preact-render-spy": "^1.2.1", + "sirv-cli": "^0.4.5" + }, + "dependencies": { + "linaria": "^1.3.3", + "preact": "^10.3.2", + "preact-render-to-string": "^5.1.4", + "preact-router": "^3.2.1" + }, + "jest": { + "preset": "jest-preset-preact", + "setupFiles": [ + "<rootDir>/tests/__mocks__/browserMocks.js", + "<rootDir>/tests/__mocks__/setupTests.js" + ] + } +} diff --git a/@linaria/examples/Preact/preact-example/preact.config.js b/@linaria/examples/Preact/preact-example/preact.config.js new file mode 100644 index 0000000..542ff99 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/preact.config.js @@ -0,0 +1,20 @@ +export default config => { + const { options, ...babelLoaderRule } = config.module.rules[0]; + options.presets.push('@babel/preset-react', 'linaria/babel'); + config.module.rules[0] = { + ...babelLoaderRule, + loader: undefined, + use: [ + { + loader: 'babel-loader', + options, + }, + { + loader: 'linaria/loader', + options: { + babelOptions: options, + }, + }, + ], + }; +}; diff --git a/@linaria/examples/Preact/preact-example/size-plugin.json b/@linaria/examples/Preact/preact-example/size-plugin.json new file mode 100644 index 0000000..7641ffa --- /dev/null +++ b/@linaria/examples/Preact/preact-example/size-plugin.json @@ -0,0 +1 @@ +[{"timestamp":1588427575969,"files":[{"filename":"ssr-bundle.8df3e.css","previous":560,"size":0,"diff":-560},{"filename":"ssr-bundle.js","previous":4323,"size":0,"diff":-4323},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.c769a.css","previous":0,"size":439,"diff":439},{"filename":"bundle.f9a38.esm.js","previous":0,"size":8723,"diff":8723},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.02f7e.js","previous":0,"size":8734,"diff":8734},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588427571799,"files":[{"filename":"sw-esm.js","previous":741,"size":0,"diff":-741},{"filename":"sw.js","previous":738,"size":0,"diff":-738},{"filename":"bundle.2cf9c.css","previous":463,"size":0,"diff":-463},{"filename":"bundle.e6c52.esm.js","previous":8723,"size":0,"diff":-8723},{"filename":"polyfills.76e71.esm.js","previous":2012,"size":0,"diff":-2012},{"filename":"route-home.chunk.e6c71.css","previous":74,"size":0,"diff":-74},{"filename":"route-home.chunk.6fec9.esm.js","previous":291,"size":0,"diff":-291},{"filename":"route-profile.chunk.62c75.css","previous":77,"size":0,"diff":-77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":1220,"size":0,"diff":-1220},{"filename":"bundle.1d180.js","previous":8731,"size":0,"diff":-8731},{"filename":"polyfills.399df.js","previous":2014,"size":0,"diff":-2014},{"filename":"route-home.chunk.6fec9.js","previous":288,"size":0,"diff":-288},{"filename":"route-profile.chunk.b43ef.js","previous":1223,"size":0,"diff":-1223},{"filename":"ssr-bundle.8df3e.css","previous":0,"size":560,"diff":560},{"filename":"ssr-bundle.js","previous":0,"size":4323,"diff":4323}]},{"timestamp":1588427459581,"files":[{"filename":"ssr-bundle.026e0.css","previous":585,"size":0,"diff":-585},{"filename":"ssr-bundle.js","previous":4323,"size":0,"diff":-4323},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.2cf9c.css","previous":0,"size":463,"diff":463},{"filename":"bundle.e6c52.esm.js","previous":0,"size":8723,"diff":8723},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.1d180.js","previous":0,"size":8731,"diff":8731},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588427455351,"files":[{"filename":"sw-esm.js","previous":741,"size":0,"diff":-741},{"filename":"sw.js","previous":738,"size":0,"diff":-738},{"filename":"bundle.bad1e.css","previous":463,"size":0,"diff":-463},{"filename":"bundle.e423d.esm.js","previous":8597,"size":0,"diff":-8597},{"filename":"polyfills.76e71.esm.js","previous":2012,"size":0,"diff":-2012},{"filename":"route-home.chunk.e6c71.css","previous":74,"size":0,"diff":-74},{"filename":"route-home.chunk.6fec9.esm.js","previous":291,"size":0,"diff":-291},{"filename":"route-profile.chunk.62c75.css","previous":77,"size":0,"diff":-77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":1220,"size":0,"diff":-1220},{"filename":"bundle.d6709.js","previous":8609,"size":0,"diff":-8609},{"filename":"polyfills.399df.js","previous":2014,"size":0,"diff":-2014},{"filename":"route-home.chunk.6fec9.js","previous":288,"size":0,"diff":-288},{"filename":"route-profile.chunk.b43ef.js","previous":1223,"size":0,"diff":-1223},{"filename":"ssr-bundle.026e0.css","previous":0,"size":585,"diff":585},{"filename":"ssr-bundle.js","previous":0,"size":4323,"diff":4323}]},{"timestamp":1588427051068,"files":[{"filename":"ssr-bundle.2807e.css","previous":587,"size":0,"diff":-587},{"filename":"ssr-bundle.js","previous":4190,"size":0,"diff":-4190},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.bad1e.css","previous":0,"size":463,"diff":463},{"filename":"bundle.e423d.esm.js","previous":0,"size":8597,"diff":8597},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.d6709.js","previous":0,"size":8609,"diff":8609},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588427046829,"files":[{"filename":"sw-esm.js","previous":741,"size":0,"diff":-741},{"filename":"sw.js","previous":738,"size":0,"diff":-738},{"filename":"bundle.7e56a.css","previous":445,"size":0,"diff":-445},{"filename":"bundle.824b0.esm.js","previous":8578,"size":0,"diff":-8578},{"filename":"polyfills.76e71.esm.js","previous":2012,"size":0,"diff":-2012},{"filename":"route-home.chunk.e6c71.css","previous":74,"size":0,"diff":-74},{"filename":"route-home.chunk.6fec9.esm.js","previous":291,"size":0,"diff":-291},{"filename":"route-profile.chunk.62c75.css","previous":77,"size":0,"diff":-77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":1220,"size":0,"diff":-1220},{"filename":"bundle.7dc58.js","previous":8587,"size":0,"diff":-8587},{"filename":"polyfills.399df.js","previous":2014,"size":0,"diff":-2014},{"filename":"route-home.chunk.6fec9.js","previous":288,"size":0,"diff":-288},{"filename":"route-profile.chunk.b43ef.js","previous":1223,"size":0,"diff":-1223},{"filename":"ssr-bundle.2807e.css","previous":0,"size":587,"diff":587},{"filename":"ssr-bundle.js","previous":0,"size":4190,"diff":4190}]},{"timestamp":1588426894643,"files":[{"filename":"ssr-bundle.6e806.css","previous":566,"size":0,"diff":-566},{"filename":"ssr-bundle.js","previous":4166,"size":0,"diff":-4166},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.7e56a.css","previous":0,"size":445,"diff":445},{"filename":"bundle.824b0.esm.js","previous":0,"size":8578,"diff":8578},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.7dc58.js","previous":0,"size":8587,"diff":8587},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588426890479,"files":[{"filename":"sw-esm.js","previous":741,"size":0,"diff":-741},{"filename":"sw.js","previous":738,"size":0,"diff":-738},{"filename":"bundle.7e56a.css","previous":445,"size":0,"diff":-445},{"filename":"bundle.8e3a8.esm.js","previous":8576,"size":0,"diff":-8576},{"filename":"polyfills.76e71.esm.js","previous":2012,"size":0,"diff":-2012},{"filename":"route-home.chunk.e6c71.css","previous":74,"size":0,"diff":-74},{"filename":"route-home.chunk.6fec9.esm.js","previous":291,"size":0,"diff":-291},{"filename":"route-profile.chunk.62c75.css","previous":77,"size":0,"diff":-77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":1220,"size":0,"diff":-1220},{"filename":"bundle.786b5.js","previous":8587,"size":0,"diff":-8587},{"filename":"polyfills.399df.js","previous":2014,"size":0,"diff":-2014},{"filename":"route-home.chunk.6fec9.js","previous":288,"size":0,"diff":-288},{"filename":"route-profile.chunk.b43ef.js","previous":1223,"size":0,"diff":-1223},{"filename":"ssr-bundle.6e806.css","previous":0,"size":566,"diff":566},{"filename":"ssr-bundle.js","previous":0,"size":4166,"diff":4166}]},{"timestamp":1588426846055,"files":[{"filename":"ssr-bundle.6e806.css","previous":566,"size":0,"diff":-566},{"filename":"ssr-bundle.js","previous":4165,"size":0,"diff":-4165},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.7e56a.css","previous":0,"size":445,"diff":445},{"filename":"bundle.8e3a8.esm.js","previous":0,"size":8576,"diff":8576},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.786b5.js","previous":0,"size":8587,"diff":8587},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588426841894,"files":[{"filename":"sw-esm.js","previous":741,"size":0,"diff":-741},{"filename":"sw.js","previous":738,"size":0,"diff":-738},{"filename":"bundle.7e56a.css","previous":445,"size":0,"diff":-445},{"filename":"bundle.eb4e9.esm.js","previous":8544,"size":0,"diff":-8544},{"filename":"polyfills.76e71.esm.js","previous":2012,"size":0,"diff":-2012},{"filename":"route-home.chunk.e6c71.css","previous":74,"size":0,"diff":-74},{"filename":"route-home.chunk.6fec9.esm.js","previous":291,"size":0,"diff":-291},{"filename":"route-profile.chunk.62c75.css","previous":77,"size":0,"diff":-77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":1220,"size":0,"diff":-1220},{"filename":"bundle.1e725.js","previous":8552,"size":0,"diff":-8552},{"filename":"polyfills.399df.js","previous":2014,"size":0,"diff":-2014},{"filename":"route-home.chunk.6fec9.js","previous":288,"size":0,"diff":-288},{"filename":"route-profile.chunk.b43ef.js","previous":1223,"size":0,"diff":-1223},{"filename":"ssr-bundle.6e806.css","previous":0,"size":566,"diff":566},{"filename":"ssr-bundle.js","previous":0,"size":4165,"diff":4165}]},{"timestamp":1588426557239,"files":[{"filename":"ssr-bundle.6e806.css","previous":566,"size":0,"diff":-566},{"filename":"ssr-bundle.js","previous":4139,"size":0,"diff":-4139},{"filename":"sw-esm.js","previous":0,"size":741,"diff":741},{"filename":"sw.js","previous":0,"size":738,"diff":738},{"filename":"bundle.7e56a.css","previous":0,"size":445,"diff":445},{"filename":"bundle.eb4e9.esm.js","previous":0,"size":8544,"diff":8544},{"filename":"polyfills.76e71.esm.js","previous":0,"size":2012,"diff":2012},{"filename":"route-home.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home.chunk.6fec9.esm.js","previous":0,"size":291,"diff":291},{"filename":"route-profile.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile.chunk.b43ef.esm.js","previous":0,"size":1220,"diff":1220},{"filename":"bundle.1e725.js","previous":0,"size":8552,"diff":8552},{"filename":"polyfills.399df.js","previous":0,"size":2014,"diff":2014},{"filename":"route-home.chunk.6fec9.js","previous":0,"size":288,"diff":288},{"filename":"route-profile.chunk.b43ef.js","previous":0,"size":1223,"diff":1223}]},{"timestamp":1588426552724,"files":[{"filename":"ssr-bundle.6e806.css","previous":0,"size":566,"diff":566},{"filename":"ssr-bundle.js","previous":0,"size":4139,"diff":4139}]}] diff --git a/@linaria/examples/Preact/preact-example/src/assets/favicon.ico b/@linaria/examples/Preact/preact-example/src/assets/favicon.ico Binary files differnew file mode 100644 index 0000000..0741914 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/favicon.ico diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-192x192.png b/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-192x192.png Binary files differnew file mode 100644 index 0000000..93ebe2e --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-192x192.png diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-512x512.png b/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-512x512.png Binary files differnew file mode 100644 index 0000000..52d1623 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/android-chrome-512x512.png diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/apple-touch-icon.png b/@linaria/examples/Preact/preact-example/src/assets/icons/apple-touch-icon.png Binary files differnew file mode 100644 index 0000000..254e4bb --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/apple-touch-icon.png diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-16x16.png b/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-16x16.png Binary files differnew file mode 100644 index 0000000..e81177d --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-16x16.png diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-32x32.png b/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-32x32.png Binary files differnew file mode 100644 index 0000000..40e9b5b --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/favicon-32x32.png diff --git a/@linaria/examples/Preact/preact-example/src/assets/icons/mstile-150x150.png b/@linaria/examples/Preact/preact-example/src/assets/icons/mstile-150x150.png Binary files differnew file mode 100644 index 0000000..9cfb889 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/assets/icons/mstile-150x150.png diff --git a/@linaria/examples/Preact/preact-example/src/components/app.js b/@linaria/examples/Preact/preact-example/src/components/app.js new file mode 100644 index 0000000..03b0292 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/app.js @@ -0,0 +1,43 @@ +import { h, Component } from 'preact'; +import { Router } from 'preact-router'; + +import Header from './header'; + +import { css } from 'linaria'; +import { styled } from 'linaria/react'; + +// Code-splitting is automated for routes +import Home from '../routes/home'; +import Profile from '../routes/profile'; + +const Background = styled.div` + background-color: aliceblue; +`; + +const bluishText = css` + color: cornflowerblue; +` + +export default class App extends Component { + + /** Gets fired when the route changes. + * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) + * @param {string} event.url The newly routed URL + */ + handleRoute = e => { + this.currentUrl = e.url; + }; + + render() { + return ( + <Background class={bluishText} id="app"> + <Header /> + <Router onChange={this.handleRoute}> + <Home path="/" /> + <Profile path="/profile/" user="me" /> + <Profile path="/profile/:user" /> + </Router> + </Background> + ); + } +} diff --git a/@linaria/examples/Preact/preact-example/src/components/header/index.js b/@linaria/examples/Preact/preact-example/src/components/header/index.js new file mode 100644 index 0000000..88ae55d --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/index.js @@ -0,0 +1,34 @@ +import { h } from 'preact'; +import { Link } from 'preact-router/match'; +import style from './style.css'; + +import { css } from 'linaria'; +import { styled } from 'linaria/react'; + +const header = css` + color: aliceblue; + font-weight: 800; + display: inline-block; + margin-right: 10px; +`; + +const WithLinaria = styled.h1` + color: ${props => props.color}; + display: inline-block; +` + +const Header = () => ( + <header class={style.header}> + <h1 class={header}>Preact App</h1> + <WithLinaria color="aliceblue"> + with Linaria! + </WithLinaria> + <nav> + <Link activeClassName={style.active} href="/">Home</Link> + <Link activeClassName={style.active} href="/profile">Me</Link> + <Link activeClassName={style.active} href="/profile/john">John</Link> + </nav> + </header> +); + +export default Header; diff --git a/@linaria/examples/Preact/preact-example/src/components/header/style.css b/@linaria/examples/Preact/preact-example/src/components/header/style.css new file mode 100644 index 0000000..9d3db38 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/style.css @@ -0,0 +1,38 @@ +.header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 56px; + padding: 0; + background: #673AB7; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + z-index: 50; +} + +.header nav { + float: right; + font-size: 100%; +} + +.header nav a { + display: inline-block; + height: 56px; + line-height: 56px; + padding: 0 15px; + min-width: 50px; + text-align: center; + background: rgba(255,255,255,0); + text-decoration: none; + color: #FFF; + will-change: background-color; +} + +.header nav a:hover, +.header nav a:active { + background: rgba(0,0,0,0.2); +} + +.header nav a.active { + background: rgba(0,0,0,0.4); +} diff --git a/@linaria/examples/Preact/preact-example/src/index.js b/@linaria/examples/Preact/preact-example/src/index.js new file mode 100644 index 0000000..009d937 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/index.js @@ -0,0 +1,4 @@ +import './style'; +import App from './components/app'; + +export default App; diff --git a/@linaria/examples/Preact/preact-example/src/manifest.json b/@linaria/examples/Preact/preact-example/src/manifest.json new file mode 100644 index 0000000..efd2035 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/manifest.json @@ -0,0 +1,21 @@ +{ + "name": "my-project", + "short_name": "my-project", + "start_url": "/", + "display": "standalone", + "orientation": "portrait", + "background_color": "#fff", + "theme_color": "#673ab8", + "icons": [ + { + "src": "/assets/icons/android-chrome-192x192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "/assets/icons/android-chrome-512x512.png", + "type": "image/png", + "sizes": "512x512" + } + ] +}
\ No newline at end of file diff --git a/@linaria/examples/Preact/preact-example/src/routes/home/index.js b/@linaria/examples/Preact/preact-example/src/routes/home/index.js new file mode 100644 index 0000000..d9a8536 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/home/index.js @@ -0,0 +1,11 @@ +import { h } from 'preact'; +import style from './style'; + +const Home = () => ( + <div class={style.home}> + <h1>Home</h1> + <p>This is the Home component.</p> + </div> +); + +export default Home; diff --git a/@linaria/examples/Preact/preact-example/src/routes/home/style.css b/@linaria/examples/Preact/preact-example/src/routes/home/style.css new file mode 100644 index 0000000..f052d25 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/home/style.css @@ -0,0 +1,5 @@ +.home { + padding: 56px 20px; + min-height: 100%; + width: 100%; +} diff --git a/@linaria/examples/Preact/preact-example/src/routes/profile/index.js b/@linaria/examples/Preact/preact-example/src/routes/profile/index.js new file mode 100644 index 0000000..cfc93d2 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/profile/index.js @@ -0,0 +1,47 @@ +import { h, Component } from 'preact'; +import style from './style'; + +export default class Profile extends Component { + state = { + time: Date.now(), + count: 10 + }; + + // update the current time + updateTime = () => { + this.setState({ time: Date.now() }); + }; + + increment = () => { + this.setState({ count: this.state.count+1 }); + }; + + // gets called when this route is navigated to + componentDidMount() { + // start a timer for the clock: + this.timer = setInterval(this.updateTime, 1000); + } + + // gets called just before navigating away from the route + componentWillUnmount() { + clearInterval(this.timer); + } + + // Note: `user` comes from the URL, courtesy of our router + render({ user }, { time, count }) { + return ( + <div class={style.profile}> + <h1>Profile: {user}</h1> + <p>This is the user profile for a user named { user }.</p> + + <div>Current time: {new Date(time).toLocaleString()}</div> + + <p> + <button onClick={this.increment}>Click Me</button> + {' '} + Clicked {count} times. + </p> + </div> + ); + } +} diff --git a/@linaria/examples/Preact/preact-example/src/routes/profile/style.css b/@linaria/examples/Preact/preact-example/src/routes/profile/style.css new file mode 100644 index 0000000..fcb1296 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/profile/style.css @@ -0,0 +1,5 @@ +.profile { + padding: 56px 20px; + min-height: 100%; + width: 100%; +} diff --git a/@linaria/examples/Preact/preact-example/src/style/index.css b/@linaria/examples/Preact/preact-example/src/style/index.css new file mode 100644 index 0000000..5fe95de --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/style/index.css @@ -0,0 +1,20 @@ +html, body { + height: 100%; + width: 100%; + padding: 0; + margin: 0; + background: #FAFAFA; + font-family: 'Helvetica Neue', arial, sans-serif; + font-weight: 400; + color: #444; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +* { + box-sizing: border-box; +} + +#app { + height: 100%; +} diff --git a/@linaria/examples/Preact/preact-example/tests/__mocks__/browserMocks.js b/@linaria/examples/Preact/preact-example/tests/__mocks__/browserMocks.js new file mode 100644 index 0000000..0f6744e --- /dev/null +++ b/@linaria/examples/Preact/preact-example/tests/__mocks__/browserMocks.js @@ -0,0 +1,21 @@ +// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage +/** + * An example how to mock localStorage is given below 👇 + */ + +/* +// Mocks localStorage +const localStorageMock = (function() { + let store = {}; + + return { + getItem: (key) => store[key] || null, + setItem: (key, value) => store[key] = value.toString(), + clear: () => store = {} + }; + +})(); + +Object.defineProperty(window, 'localStorage', { + value: localStorageMock +}); */ diff --git a/@linaria/examples/Preact/preact-example/tests/__mocks__/fileMocks.js b/@linaria/examples/Preact/preact-example/tests/__mocks__/fileMocks.js new file mode 100644 index 0000000..7b27556 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/tests/__mocks__/fileMocks.js @@ -0,0 +1,3 @@ +// This fixed an error related to the CSS and loading gif breaking my Jest test +// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets +module.exports = 'test-file-stub';
\ No newline at end of file diff --git a/@linaria/examples/Preact/preact-example/tests/__mocks__/setupTests.js b/@linaria/examples/Preact/preact-example/tests/__mocks__/setupTests.js new file mode 100644 index 0000000..4bd4ae4 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/tests/__mocks__/setupTests.js @@ -0,0 +1,6 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-preact-pure'; + +configure({ + adapter: new Adapter() +}); diff --git a/@linaria/examples/Preact/preact-example/tests/header.test.js b/@linaria/examples/Preact/preact-example/tests/header.test.js new file mode 100644 index 0000000..f116ef4 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/tests/header.test.js @@ -0,0 +1,12 @@ +import { h } from 'preact'; +import Header from '../src/components/header'; +// See: https://github.com/preactjs/enzyme-adapter-preact-pure +import { shallow } from 'enzyme'; + +describe('Initial Test of the Header', () => { + test('Header renders 3 nav items', () => { + const context = shallow(<Header />); + expect(context.find('h1').text()).toBe('Preact App'); + expect(context.find('Link').length).toBe(3); + }); +}); |
