Common configurations and helpers for Robin's projects.
If it doesn't have any dependencies then it's probably in here; otherwise it's in another package.
npm i
npx husky install
cd my_project
npm i -S https://github.com/robertakarobin/util.git
cp -R ./node_modules/@robertakarobin/util/.vscode .vscode
(When/if microsoft/vscode#15909 is done, extend the settings intead.)
When prompted whether you want VSCode to use the locally-installed Typescript, select 'Yes'.
- Valid typing
- Valid HTML
- No custom template syntax
- No custom CSS syntax
- No custom VSCode extension required
- No 3rd party modules for front-end code, and for back-end code only when it would otherwise require reinventing a big ol' wheel beyond the day-to-day of making a web app
- Automates boring CSS stuff
- Produces static HTML/CSS files for SSG
- Adds interactivity with JS to static HTML files, without needing to rerender
- Specify what should get rerendered, when and where
- Produces interactive sites for CSR
- Blends seamlessly from static files to CSR
- Autocompletes routes
- Markdown support
- The build script copies the contents of
src
to atmp
folder so that it can transpile<markdown>
tags before the TS is compiled. Without this step the Markdown would need to be compiled in the browser. However, if yourtsconfig.json
has path aliases forsrc
then it'll keep the Markdown from getting transpiled correctly. To resolve, point your alias totmp
as well assrc
, e.g.paths: { "@src/*": ["tmp/*", "src/*"]}
- Have to include
tmp
in the tsconfigincludes
until TSX fixes an issue with decorators: evanw/esbuild#3496
- TODO1: Add TS preprocessing back in
- TODO1: Don't refer to functions by string -- keeps names from being minified
- TODO2: Image preprocessing
- TODO2: Import SVGs
- TODO2: Remove CSS from JS bundles
- TODO3: Use
#
private fields - TODO3: CSS class and variable mapping
- Allow anonymous event handlers, for when we know a component won't be SSGd
- A way to cache DOM queries, like Angular's ViewChild
- Fully hydrate the template on the landing page -- e.g. with event listeners and stuff -- without needing to rerender it
- Don't use
[on]
attributes? - Style setter
- Specify which routes to build in build config, not with
isSSG
- Match routes with params
- Add reducer functions
- I'm calling them formatters, since (a) reducers involve actions, and (b) "reducer" is a confusing name
- onEl => onConstruct
- Extract out link component
- Make Emitter subscriptions strong by default
- Make
Component.instances
weak - Extract
util/index.ts
to separate files, for code splitting - Add isHydrated option
- Don't require script
- Bust CSS cache
- Add minify as build option
- Template/CSS prefix
- .bind works on emitters too
- Use constructor to create or get existing instance
- Components emit events
- Show
[data-component]
on build? - Jump anchors
- Base URI
- Add route helper
- Don't use
Component.push
in<script>
- Set absolute path for imports
- Extract
window.
boilerplate to beginning of layout - Automatically set HTML attributes
- Differentiate between weak/strong subscriptions
- Add config with HTML/CSS validator/formatter
- Fix Windows paths
- toFunction should return the instance
- Component content shouldn't be duplicated
- Bug: Instances not binding to elements on rerender
bind
without needing page referesh- Route names for HTML IDs
- Fix
route()
names not bring strongly typed - CSS to external
- Vendor doesn't need own bundle
- CSS breakpoints
- Declare CSS variables inline
- Get CSS variable names inline
- Support nested tokens
- Bundle all components/pages together
- Markdown support
- Include CSS on fallback pages