-
-
Save lx4r/0784e5afb64c686502f26fa9316bb07f to your computer and use it in GitHub Desktop.
Preact CLI 3 + TypeScript starter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
env: { | |
browser: true | |
}, | |
extends: [ | |
'plugin:react/recommended', | |
'plugin:@typescript-eslint/recommended', | |
'prettier/@typescript-eslint', | |
'plugin:prettier/recommended' | |
], | |
parser: '@typescript-eslint/parser', | |
parserOptions: { | |
ecmaFeatures: { | |
jsx: true | |
}, | |
ecmaVersion: 2018, | |
sourceType: 'module' | |
}, | |
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' | |
} | |
} | |
], | |
ignorePatterns: ['node_modules/', 'build/'] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
build | |
node_modules | |
package-lock.json | |
size-plugin.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { h, FunctionalComponent } from 'preact'; | |
const App: FunctionalComponent = () => { | |
return ( | |
<div> | |
<h1>Hello World!</h1> | |
</div> | |
); | |
}; | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { JSX } from 'preact'; | |
export = JSX; | |
export as namespace JSX; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import App from './App'; | |
export default App; | |
// eslint-disable-next-line @typescript-eslint/no-explicit-any | |
if ((module as any).hot) { | |
// tslint:disable-next-line:no-var-requires | |
require('preact/debug'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
transform: { | |
"^.+\\.tsx?$": "ts-jest" | |
}, | |
verbose: true, | |
setupFiles: [ | |
"<rootDir>/src/tests/__mocks__/browserMocks.js" | |
], | |
testURL: "http://localhost:8080", | |
moduleFileExtensions: [ | |
"js", | |
"jsx", | |
"ts", | |
"tsx" | |
], | |
moduleDirectories: [ | |
"node_modules" | |
], | |
testMatch: [ | |
"**/__tests__/**/*.[jt]s?(x)", | |
"**/?(*.)(spec|test).[jt]s?(x)" | |
], | |
moduleNameMapper: { | |
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js", | |
"\\.(css|less|scss)$": "identity-obj-proxy", | |
"^./style$": "identity-obj-proxy", | |
"^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js", | |
"^react$": "preact/compat", | |
"^react-dom$": "preact/compat", | |
"^react-addons-css-transition-group$": "preact-css-transition-group" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"private": true, | |
"name": "my-preact-cli-typescript-project", | |
"version": "0.0.0", | |
"scripts": { | |
"build": "preact build", | |
"serve": "sirv build --port 8080 --cors --single", | |
"dev": "preact watch", | |
"lint": "eslint src/**/*.{js,jsx,ts,tsx}", | |
"test": "jest ./tests" | |
}, | |
"prettier": { | |
"singleQuote": true, | |
"useTabs": true | |
}, | |
"husky": { | |
"hooks": { | |
"pre-commit": "lint-staged" | |
} | |
}, | |
"lint-staged": { | |
"*.{css,md,scss}": "prettier --write", | |
"*.{js,jsx,ts,tsx}": "eslint --fix" | |
}, | |
"dependencies": { | |
"preact": "^10.4.0", | |
"preact-jsx-chai": "^3.0.0", | |
"preact-markup": "^2.0.0", | |
"preact-render-to-string": "^5.1.4", | |
"preact-router": "^3.2.1" | |
}, | |
"devDependencies": { | |
"@types/jest": "^25.1.2", | |
"@types/node": "^12.12.36", | |
"@types/webpack-env": "^1.15.1", | |
"@typescript-eslint/eslint-plugin": "^2.19.0", | |
"@typescript-eslint/parser": "^2.19.0", | |
"css-loader": "^1.0.1", | |
"eslint": "^6.8.0", | |
"eslint-config-prettier": "^6.10.0", | |
"eslint-plugin-prettier": "^3.1.2", | |
"eslint-plugin-react": "^7.18.3", | |
"husky": "^4.2.1", | |
"identity-obj-proxy": "^3.0.0", | |
"jest": "^25.1.0", | |
"lint-staged": "^10.0.7", | |
"preact-cli": "^3.0.0-next.19", | |
"preact-render-spy": "^1.3.0", | |
"prettier": "^1.19.1", | |
"sirv-cli": "^1.0.0-next.3", | |
"ts-jest": "^25.2.0", | |
"ts-loader": "^6.2.1", | |
"typescript": "^3.7.5", | |
"typings-for-css-modules-loader": "^1.7.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 {object} helpers - helpers for modifying config. See https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/webpack/transform-config.js#L133 | |
**/ | |
webpack(config, env, helpers) { | |
// Switch css-loader for typings-for-css-modules-loader, which is a wrapper | |
// that automatically generates .d.ts files for loaded CSS | |
helpers.getLoadersByName(config, 'css-loader').forEach(({ loader }) => { | |
loader.loader = 'typings-for-css-modules-loader'; | |
loader.options = Object.assign(loader.options, { | |
camelCase: true, | |
banner: | |
'// This file is automatically generated from your CSS. Any edits will be overwritten.', | |
namedExport: true, | |
silent: true | |
}); | |
}); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"compileOnSave": false, | |
"compilerOptions": { | |
"target": "ES5", | |
"module": "ESNext", | |
// "lib": [], // any library files to be included in the compilation: | |
// "allowJs": true, | |
// "checkJs": true, | |
"jsx": "react", | |
"jsxFactory": "h", | |
"moduleResolution": "node", | |
"strict": true, | |
// "noImplicitAny": true, | |
// "strictNullChecks": true, | |
// "noImplicitThis": true, | |
// "alwaysStrict": true, | |
"esModuleInterop": true, | |
"noEmit": true, | |
"baseUrl": "." | |
}, | |
"exclude": [ | |
"*.config.js", | |
"build" | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment