Add preact frontend generated by https://github.com/preactjs/preact-cli
|
@ -0,0 +1,41 @@
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true
|
||||||
|
},
|
||||||
|
plugins: ["@typescript-eslint"],
|
||||||
|
extends: [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:prettier/recommended",
|
||||||
|
"prettier/@typescript-eslint",
|
||||||
|
"prettier/react"
|
||||||
|
],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
parserOptions: {
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
},
|
||||||
|
project: "./tsconfig.eslint.json",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"react/no-unknown-property": ["error", { ignore: ["class"] }],
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
pragma: "h",
|
||||||
|
version: "detect"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ["*.js"],
|
||||||
|
rules: {
|
||||||
|
"@typescript-eslint/explicit-function-return-type": "off",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/*.log
|
|
@ -0,0 +1,4 @@
|
||||||
|
package.json
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
build
|
|
@ -0,0 +1 @@
|
||||||
|
tabWidth: 4
|
|
@ -0,0 +1,19 @@
|
||||||
|
# frontend
|
||||||
|
|
||||||
|
## CLI Commands
|
||||||
|
* `npm install`: Installs dependencies
|
||||||
|
|
||||||
|
* `npm run dev`: Run a development, HMR server
|
||||||
|
|
||||||
|
* `npm run serve`: Run a production-like server
|
||||||
|
|
||||||
|
* `npm run build`: Production-ready build
|
||||||
|
|
||||||
|
* `npm run lint`: Pass TypeScript files using TSLint
|
||||||
|
|
||||||
|
* `npm run test`: Run Jest and Enzyme with
|
||||||
|
[`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
|
||||||
|
your tests
|
||||||
|
|
||||||
|
|
||||||
|
For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
|
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = {
|
||||||
|
preset: "jest-preset-preact",
|
||||||
|
setupFiles: [
|
||||||
|
"<rootDir>/src/tests/__mocks__/setupTests.js",
|
||||||
|
"<rootDir>/src/tests/__mocks__/browserMocks.js"
|
||||||
|
],
|
||||||
|
testURL: "http://localhost:8080",
|
||||||
|
moduleNameMapper: {
|
||||||
|
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMocks.js",
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,56 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "frontend",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"build": "preact build",
|
||||||
|
"serve": "sirv build --port 8080 --cors --single",
|
||||||
|
"dev": "preact watch",
|
||||||
|
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
|
||||||
|
"test": "jest ./tests"
|
||||||
|
},
|
||||||
|
"husky": {
|
||||||
|
"hooks": {
|
||||||
|
"pre-commit": "lint-staged"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{css,md,scss}": "prettier --write",
|
||||||
|
"*.{js,jsx,ts,tsx}": "eslint --fix"
|
||||||
|
},
|
||||||
|
"eslintIgnore": [
|
||||||
|
"build/*"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"preact": "^10.3.1",
|
||||||
|
"preact-jsx-chai": "^3.0.0",
|
||||||
|
"preact-markup": "^2.0.0",
|
||||||
|
"preact-render-to-string": "^5.1.4",
|
||||||
|
"preact-router": "^3.2.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
|
||||||
|
"@types/enzyme": "^3.10.5",
|
||||||
|
"@types/jest": "^25.1.2",
|
||||||
|
"@types/webpack-env": "^1.15.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^2.25.0",
|
||||||
|
"@typescript-eslint/parser": "^2.25.0",
|
||||||
|
"css-loader": "^3.5.3",
|
||||||
|
"enzyme": "^3.11.0",
|
||||||
|
"enzyme-adapter-preact-pure": "^2.2.0",
|
||||||
|
"eslint": "^6.8.0",
|
||||||
|
"eslint-config-prettier": "^6.10.1",
|
||||||
|
"eslint-plugin-prettier": "^3.1.2",
|
||||||
|
"eslint-plugin-react": "^7.19.0",
|
||||||
|
"eslint-plugin-react-hooks": "^3.0.0",
|
||||||
|
"husky": "^4.2.1",
|
||||||
|
"jest": "^25.1.0",
|
||||||
|
"jest-preset-preact": "^1.0.0",
|
||||||
|
"lint-staged": "^10.0.7",
|
||||||
|
"preact-cli": "^3.0.0-rc.16",
|
||||||
|
"prettier": "^1.19.1",
|
||||||
|
"sirv-cli": "^1.0.0-next.3",
|
||||||
|
"typescript": "^3.7.5"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { resolve } from "path";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* Function that mutates the original webpack config.
|
||||||
|
* Supports asynchronous changes when a promise is returned (or it's an async function).
|
||||||
|
*
|
||||||
|
* @param {object} config - original webpack config.
|
||||||
|
* @param {object} env - options passed to the CLI.
|
||||||
|
* @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
|
||||||
|
* @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
|
||||||
|
**/
|
||||||
|
webpack(config, env, helpers, options) {
|
||||||
|
config.module.rules[4].use.splice(1, 0, {
|
||||||
|
loader: "@teamsupercell/typings-for-css-modules-loader",
|
||||||
|
options: {
|
||||||
|
banner:
|
||||||
|
"// This file is automatically generated from your CSS. Any edits will be overwritten.",
|
||||||
|
disableLocalsExport: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use any `index` file, not just index.js
|
||||||
|
config.resolve.alias["preact-cli-entrypoint"] = resolve(
|
||||||
|
process.cwd(),
|
||||||
|
"src",
|
||||||
|
"index"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
[{"timestamp":1595203869912,"files":[{"filename":"ssr-bundle.ac348.css","previous":602,"size":0,"diff":-602},{"filename":"ssr-bundle.js","previous":4208,"size":0,"diff":-4208},{"filename":"bundle.7e56a.css","previous":0,"size":445,"diff":445},{"filename":"bundle.*****.esm.js","previous":0,"size":8377,"diff":8377},{"filename":"polyfills.*****.esm.js","previous":0,"size":1969,"diff":1969},{"filename":"route-home/index.tsx.chunk.e6c71.css","previous":0,"size":74,"diff":74},{"filename":"route-home/index.tsx.chunk.*****.esm.js","previous":0,"size":237,"diff":237},{"filename":"route-notfound/index.tsx.chunk.c3378.css","previous":0,"size":65,"diff":65},{"filename":"route-notfound/index.tsx.chunk.*****.esm.js","previous":0,"size":282,"diff":282},{"filename":"route-profile/index.tsx.chunk.62c75.css","previous":0,"size":77,"diff":77},{"filename":"route-profile/index.tsx.chunk.*****.esm.js","previous":0,"size":1027,"diff":1027},{"filename":"sw-esm.js","previous":0,"size":8272,"diff":8272},{"filename":"sw.js","previous":0,"size":8272,"diff":8272},{"filename":"bundle.7b2b9.js","previous":0,"size":8384,"diff":8384},{"filename":"polyfills.694cb.js","previous":0,"size":2013,"diff":2013},{"filename":"route-home/index.tsx.chunk.d60a2.js","previous":0,"size":283,"diff":283},{"filename":"route-notfound/index.tsx.chunk.6e171.js","previous":0,"size":329,"diff":329},{"filename":"route-profile/index.tsx.chunk.df698.js","previous":0,"size":1096,"diff":1096}]},{"timestamp":1595203853803,"files":[{"filename":"ssr-bundle.ac348.css","previous":0,"size":602,"diff":602},{"filename":"ssr-bundle.js","previous":0,"size":4208,"diff":4208}]}]
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"preact-cli/babel"
|
||||||
|
]
|
||||||
|
}
|
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 626 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 8.8 KiB |
|
@ -0,0 +1,34 @@
|
||||||
|
import { FunctionalComponent, h } from "preact";
|
||||||
|
import { Route, Router, RouterOnChangeArgs } from "preact-router";
|
||||||
|
|
||||||
|
import Home from "../routes/home";
|
||||||
|
import Profile from "../routes/profile";
|
||||||
|
import NotFoundPage from '../routes/notfound';
|
||||||
|
import Header from "./header";
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
if ((module as any).hot) {
|
||||||
|
// tslint:disable-next-line:no-var-requires
|
||||||
|
require("preact/debug");
|
||||||
|
}
|
||||||
|
|
||||||
|
const App: FunctionalComponent = () => {
|
||||||
|
let currentUrl: string;
|
||||||
|
const handleRoute = (e: RouterOnChangeArgs) => {
|
||||||
|
currentUrl = e.url;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="app">
|
||||||
|
<Header />
|
||||||
|
<Router onChange={handleRoute}>
|
||||||
|
<Route path="/" component={Home} />
|
||||||
|
<Route path="/profile/" component={Profile} user="me" />
|
||||||
|
<Route path="/profile/:user" component={Profile} />
|
||||||
|
<NotFoundPage default />
|
||||||
|
</Router>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { FunctionalComponent, h } from "preact";
|
||||||
|
import { Link } from "preact-router/match";
|
||||||
|
import * as style from "./style.css";
|
||||||
|
|
||||||
|
const Header: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<header class={style.header}>
|
||||||
|
<h1>Preact App</h1>
|
||||||
|
<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;
|
|
@ -0,0 +1,48 @@
|
||||||
|
.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 h1 {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 56px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||||
|
declare namespace StyleCssNamespace {
|
||||||
|
export interface IStyleCss {
|
||||||
|
active: string;
|
||||||
|
header: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||||
|
|
||||||
|
export = StyleCssModule;
|
|
@ -0,0 +1,4 @@
|
||||||
|
import "./style/index.css";
|
||||||
|
import App from "./components/app.tsx";
|
||||||
|
|
||||||
|
export default App;
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"short_name": "frontend",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { FunctionalComponent, h } from "preact";
|
||||||
|
import * as style from "./style.css";
|
||||||
|
|
||||||
|
const Home: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<div class={style.home}>
|
||||||
|
<h1>Home</h1>
|
||||||
|
<p>This is the Home component.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
|
@ -0,0 +1,5 @@
|
||||||
|
.home {
|
||||||
|
padding: 56px 20px;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||||
|
declare namespace StyleCssNamespace {
|
||||||
|
export interface IStyleCss {
|
||||||
|
home: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||||
|
|
||||||
|
export = StyleCssModule;
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { FunctionalComponent, h } from "preact";
|
||||||
|
import { Link } from 'preact-router/match';
|
||||||
|
import * as style from "./style.css";
|
||||||
|
|
||||||
|
const Notfound: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<div class={style.notfound}>
|
||||||
|
<h1>Error 404</h1>
|
||||||
|
<p>That page doesn't exist.</p>
|
||||||
|
<Link href="/"><h4>Back to Home</h4></Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Notfound;
|
|
@ -0,0 +1,4 @@
|
||||||
|
.notfound {
|
||||||
|
padding: 0 5%;
|
||||||
|
margin: 100px 0;
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||||
|
declare namespace StyleCssNamespace {
|
||||||
|
export interface IStyleCss {
|
||||||
|
notfound: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||||
|
|
||||||
|
export = StyleCssModule;
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { FunctionalComponent, h } from "preact";
|
||||||
|
import { useEffect, useState } from "preact/hooks";
|
||||||
|
import * as style from "./style.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
user: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Profile: FunctionalComponent<Props> = (props: Props) => {
|
||||||
|
const { user } = props;
|
||||||
|
const [time, setTime] = useState<number>(Date.now());
|
||||||
|
const [count, setCount] = useState<number>(0);
|
||||||
|
|
||||||
|
// gets called when this route is navigated to
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = window.setInterval(() => setTime(Date.now()), 1000);
|
||||||
|
|
||||||
|
// gets called just before navigating away from the route
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// update the current time
|
||||||
|
const increment = () => {
|
||||||
|
setCount(count + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
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={increment}>Click Me</button> Clicked {count}{" "}
|
||||||
|
times.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Profile;
|
|
@ -0,0 +1,5 @@
|
||||||
|
.profile {
|
||||||
|
padding: 56px 20px;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||||
|
declare namespace StyleCssNamespace {
|
||||||
|
export interface IStyleCss {
|
||||||
|
profile: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||||
|
|
||||||
|
export = StyleCssModule;
|
|
@ -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%;
|
||||||
|
}
|
|
@ -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
|
||||||
|
}); */
|
|
@ -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
|
||||||
|
export default "test-file-stub";
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { configure } from "enzyme";
|
||||||
|
import Adapter from "enzyme-adapter-preact-pure";
|
||||||
|
|
||||||
|
configure({
|
||||||
|
adapter: new Adapter()
|
||||||
|
});
|
|
@ -0,0 +1,3 @@
|
||||||
|
// Enable enzyme adapter's integration with TypeScript
|
||||||
|
// See: https://github.com/preactjs/enzyme-adapter-preact-pure#usage-with-typescript
|
||||||
|
/// <reference types="enzyme-adapter-preact-pure" />
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { h } from "preact";
|
||||||
|
// See: https://github.com/preactjs/enzyme-adapter-preact-pure
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import Header from "../components/header";
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,5 @@
|
||||||
|
// see https://github.com/typescript-eslint/typescript-eslint/issues/890
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"include": ["*.config.js", "src/**/*"]
|
||||||
|
}
|
|
@ -0,0 +1,57 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Basic Options */
|
||||||
|
"target": "ES5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
|
||||||
|
"module": "ESNext", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||||
|
// "lib": [], /* Specify library files to be included in the compilation: */
|
||||||
|
"allowJs": true, /* Allow javascript files to be compiled. */
|
||||||
|
// "checkJs": true, /* Report errors in .js files. */
|
||||||
|
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||||
|
"jsxFactory": "h", /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
|
||||||
|
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||||
|
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||||
|
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||||
|
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||||
|
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||||
|
// "removeComments": true, /* Do not emit comments to output. */
|
||||||
|
// "noEmit": true, /* Do not emit outputs. */
|
||||||
|
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||||
|
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||||
|
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||||
|
|
||||||
|
/* Strict Type-Checking Options */
|
||||||
|
"strict": true, /* Enable all strict type-checking options. */
|
||||||
|
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||||
|
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||||
|
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||||
|
|
||||||
|
/* Additional Checks */
|
||||||
|
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||||
|
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||||
|
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||||
|
|
||||||
|
/* Module Resolution Options */
|
||||||
|
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||||
|
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||||
|
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||||
|
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||||
|
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||||
|
// "types": [], /* Type declaration files to be included in compilation. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||||
|
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||||
|
|
||||||
|
/* Source Map Options */
|
||||||
|
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||||
|
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||||
|
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||||
|
|
||||||
|
/* Experimental Options */
|
||||||
|
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||||
|
"esModuleInterop": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.tsx", "src/**/*.ts"]
|
||||||
|
}
|
|
@ -35,6 +35,7 @@ use self::models::*;
|
||||||
#[database("sqlite_events")]
|
#[database("sqlite_events")]
|
||||||
struct DbConn(diesel::SqliteConnection);
|
struct DbConn(diesel::SqliteConnection);
|
||||||
|
|
||||||
|
/*
|
||||||
#[get("/")]
|
#[get("/")]
|
||||||
fn index() -> Result<String, anyhow::Error> {
|
fn index() -> Result<String, anyhow::Error> {
|
||||||
Ok(format!(
|
Ok(format!(
|
||||||
|
@ -42,6 +43,7 @@ fn index() -> Result<String, anyhow::Error> {
|
||||||
"aa"
|
"aa"
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
#[get("/log/<device_name>/<value>")]
|
#[get("/log/<device_name>/<value>")]
|
||||||
fn log_new(device_name: &RawStr, value: &RawStr, conn: DbConn) -> Result<String, anyhow::Error> {
|
fn log_new(device_name: &RawStr, value: &RawStr, conn: DbConn) -> Result<String, anyhow::Error> {
|
||||||
|
@ -78,7 +80,11 @@ fn log_get(device_name: &RawStr, conn: DbConn) -> Result<String, anyhow::Error>
|
||||||
fn main() {
|
fn main() {
|
||||||
rocket::ignite()
|
rocket::ignite()
|
||||||
.attach(DbConn::fairing())
|
.attach(DbConn::fairing())
|
||||||
.mount("/", routes![index, log_new, log_get])
|
.mount(
|
||||||
|
"/",
|
||||||
|
rocket_contrib::serve::StaticFiles::from("frontend/build"),
|
||||||
|
)
|
||||||
|
.mount("/", routes![log_new, log_get])
|
||||||
.launch();
|
.launch();
|
||||||
|
|
||||||
println!("after");
|
println!("after");
|
||||||
|
|
|
@ -0,0 +1,94 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Hello!</p>
|
||||||
|
|
||||||
|
<div id="scatter_area"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let data = Object.assign(d3.csvParse(await FileAttachment("flights.csv").text(), d3.autoType), {y: "Flights"});
|
||||||
|
|
||||||
|
area = (data, x) => d3.area()
|
||||||
|
.curve(d3.curveStepAfter)
|
||||||
|
.x(d => x(d.date))
|
||||||
|
.y0(y(0))
|
||||||
|
.y1(d => y(d.value))
|
||||||
|
(data)
|
||||||
|
|
||||||
|
yAxis = (g, y) => g
|
||||||
|
.attr("transform", `translate(${margin.left},0)`)
|
||||||
|
.call(d3.axisLeft(y).ticks(null, "s"))
|
||||||
|
.call(g => g.select(".domain").remove())
|
||||||
|
.call(g => g.select(".tick:last-of-type text").clone()
|
||||||
|
.attr("x", 3)
|
||||||
|
.attr("text-anchor", "start")
|
||||||
|
.attr("font-weight", "bold")
|
||||||
|
.text(data.y))
|
||||||
|
|
||||||
|
xAxis = (g, x) => g
|
||||||
|
.attr("transform", `translate(0,${height - margin.bottom})`)
|
||||||
|
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
|
||||||
|
|
||||||
|
y = d3.scaleLinear()
|
||||||
|
.domain([0, d3.max(data, d => d.value)]).nice()
|
||||||
|
.range([height - margin.bottom, margin.top])
|
||||||
|
|
||||||
|
x = d3.scaleUtc()
|
||||||
|
.domain(d3.extent(data, d => d.date))
|
||||||
|
.range([margin.left, width - margin.right])
|
||||||
|
|
||||||
|
margin = ({top: 20, right: 20, bottom: 30, left: 30})
|
||||||
|
|
||||||
|
height = 500
|
||||||
|
|
||||||
|
chart = {
|
||||||
|
const zoom = d3.zoom()
|
||||||
|
.scaleExtent([1, 32])
|
||||||
|
.extent([[margin.left, 0], [width - margin.right, height]])
|
||||||
|
.translateExtent([[margin.left, -Infinity], [width - margin.right, Infinity]])
|
||||||
|
.on("zoom", zoomed);
|
||||||
|
|
||||||
|
const svg = d3.create("svg")
|
||||||
|
.attr("viewBox", [0, 0, width, height]);
|
||||||
|
|
||||||
|
const clip = DOM.uid("clip");
|
||||||
|
|
||||||
|
svg.append("clipPath")
|
||||||
|
.attr("id", clip.id)
|
||||||
|
.append("rect")
|
||||||
|
.attr("x", margin.left)
|
||||||
|
.attr("y", margin.top)
|
||||||
|
.attr("width", width - margin.left - margin.right)
|
||||||
|
.attr("height", height - margin.top - margin.bottom);
|
||||||
|
|
||||||
|
const path = svg.append("path")
|
||||||
|
.attr("clip-path", clip)
|
||||||
|
.attr("fill", "steelblue")
|
||||||
|
.attr("d", area(data, x));
|
||||||
|
|
||||||
|
const gx = svg.append("g")
|
||||||
|
.call(xAxis, x);
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.call(yAxis, y);
|
||||||
|
|
||||||
|
svg.call(zoom)
|
||||||
|
.transition()
|
||||||
|
.duration(750)
|
||||||
|
.call(zoom.scaleTo, 4, [x(Date.UTC(2001, 8, 1)), 0]);
|
||||||
|
|
||||||
|
function zoomed() {
|
||||||
|
const xz = d3.event.transform.rescaleX(x);
|
||||||
|
path.attr("d", area(data, xz));
|
||||||
|
gx.call(xAxis, xz);
|
||||||
|
}
|
||||||
|
|
||||||
|
return svg.node();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|