a gist to recap the current status, also available as library picker!
do one thing only and do it well
| class EventEmitter { | |
| constructor() { | |
| this.target = new EventTarget(); | |
| } | |
| on(eventName, listener) { | |
| return this.target.addEventListener(eventName, listener); | |
| } | |
| once(eventName, listener) { | |
| return this.target.addEventListener(eventName, listener, { once: true }); | |
| } |
| // in $PROJECT_ROOT/typings/@sapper | |
| declare module '@sapper/app' { | |
| // from sapper/runtime/src/app/types.ts | |
| // sapper doesn't export its types yet | |
| interface Redirect { | |
| statusCode: number | |
| location: string | |
| } | |
| // end |
Assuming you don't want to statically export a Sapper app, most of the parts to build a simple SSG for Svelte already exist. The only thing that is missing is the tooling ('only').
However, you don't need a lot to get things going: just a couple of rollup builds and a config file will get you most of the way there. Just some glue.
What follows is a bunch of rambling, half thought out thoughts on how I would probably go about this. Most of the stuff discussed here is stuff I've actually done or half done or am in the process of doing with varying degrees of success. It is something I'll be spending more time on in the future. There are other things I have done, want to do, or think would be a good idea that are not listed here as they don't fall into the scope of a simple SSG.
*Dislaimer: This is how I would build an SSG, this isn't the only way, but I like this approach as there are a bunch of compile-time optimisations you can per
I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.
I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.
"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr
| // Copyright (c) 2019, Ben Noordhuis <info@bnoordhuis.nl> | |
| // | |
| // Permission to use, copy, modify, and/or distribute this software for any | |
| // purpose with or without fee is hereby granted, provided that the above | |
| // copyright notice and this permission notice appear in all copies. | |
| // | |
| // THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES | |
| // WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF | |
| // MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR | |
| // ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES |
| { | |
| "fonts": ["./src/NotoSerifSC-Bold.otf"], | |
| "texts": " 0123456789:年月日时分秒公元农历腊零初一二三四五六七八九十廿甲乙丙丁戊己庚辛壬癸子丑寅卯辰巳午未申酉戌亥立春雨水惊蛰春分清明谷雨立夏小满芒种夏至小暑大暑立秋处暑白露秋分寒露霜降立冬小雪大雪冬至小寒大寒" | |
| } |
| import { useEffect, useRef, useState, Dispatch, SetStateAction } from "react"; | |
| /* originally via: | |
| https://gist.github.com/AlpacaGoesCrazy/25e3a15fcd4e57fb8ccd408d488554d7 | |
| */ | |
| const useStateSafe = function<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>] { | |
| const isMounted = useRef(false); // useRef to memorize if the component is mounted between renders | |
| const [state, setState] = useState<T>(initialValue); |
