christopherbiscardi/toast

Moved! now at https://github.com/toastdotdev/toast

The Toast repo has moved! You're probably looking for https://github.com/toastdotdev/toast

toast's Issues

automatically inject preload tags for page resources

as a helpful performance boost, it would be nice to automatically inject a <link rel="preload" /> for every resource loaded on a given page

I'm not sure if this list of modules is already pulled up as Toast is building, but it would be nice if we could find those and auto-inject preloading tags for each resource

[idea] how could a clear "only do this at build time" API work?

it would be great if there was a clear way to specify which work in the app should only happen during build time. this could be something like Next's getStaticProps, or something entirely different

11ty does an interesting thing where you basically execute arbitrary Node and dump the output into its data layer, which is flexible to the point of being potentially very confusing, but might be worth exploring as a true "pre-processing" step instead of mixing into the React logic directly?

going galaxy brain for a second, I feel like there are a couple opportunities in this API design:

1. a clear way to feed static data into React apps. we could sidestep this entirely by generating JSON files instead of worrying about a custom data layer, or we could auto-insert a data prop into components (or something different; I'd love to hear how this is handled in other frameworks, languages, etc. to see if there are some existing patterns that are really intuitive)

2. a clear way to register custom data into the static data layer. Gatsby's GraphQL approach is cool because it has a clear API, but it's A Lot™ to get ramped up on, so that's probably more than we need. 11ty and Next let you write whatever code you want and just fire that back into your pages, which is extremely flexible but not super approachable for someone who doesn't have a lot of JavaScript experience. I feel like finding the goldlocks zone of "structured enough to be teachable/predictable" and "flexible enough that I can just add data" is where the magic lies, but I also think that this could be its own project that emerges after seeing how people are adding and using this data in the wild for a while

I'm kinda braindumping here in hopes of getting smarter people than me thinking about this, because I know what I want the outcome to be, but I don't have strong opinions on how it's actually done 😅

Toast sites without pageWrapper result in <undefined> tags

cc/ @lannonbr

Exposing API access to Toast's babel config

To insert custom babel plugins for tools like inling SVGs, adding CSS-in-JS libraries, etc, it is needed to insert these babel plugins / presets into Toast's.

Currently you can do this by opening node_modules/toast/src/transforms.js in a toast site and adding the various babel plugins you need and then save the change with a tool like patch-package, but it would be better down the road to expose the babel config somehow to users.

Incremental Compilation

for #1

• caching mechanism

make module-aliases use package.json snowpack alias field

for example, when using something that direct imports @mdx-js/react

var moduleAlias = require("module-alias");

moduleAlias.addAliases({
  react: "preact/compat",
  "react-dom": "preact/compat",
  "@mdx-js/react": "@mdx-js/preact",
  //   'create-react-class': path.resolve(__dirname, './create-preact-class')
});

Cannot find module '@sector/toast'

Error when running: yarn toast bake

Error: Cannot find module '@sector/toast'

_redirects file not being copied from `static`

it looks like the _redirects file is ignored when copying from static for whatever reason, so redirects on Netlify sites currently don't work

I'll submit a PR to fix shortly