search

ProjectEvergreen / greenwood

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.
https://www.greenwoodjs.io
MIT License
96 stars 9 forks source link

Rfcs/issue 955 layouts and pages #1212

Closed thescientist13 closed 3 months ago

thescientist13 commented 6 months ago

Related Issue

resolves #955 and fixes #1044 and #988

Summary of Changes

  1. Rename templates/ directory to layouts/
  2. Refactor SSR pipeline to reduce duplicate / redundant SSR operations
  3. Support custom elements as layouts
  4. Support custom static and dynamic formats for pages and SSR page / API routes (respectively)
  5. Enabled dynamic pages / API routes support for TypeScript plugin
  6. Move API Routes to be file based routing under the pages directory
  7. Updated relevant documentation

TODO

  1. [x] rebase against release branch (and reconcile Lit polyfill refactoring)
  2. [x] confirm bug fixes are fixed downstream with TT - https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv/pull/115
  3. [x] Custom elements as layouts
  4. [x] Additional languages (e.g. TS, markdown) for pages as
    • static pages
    • dynamic pages + .ts example
    • APIs
  5. [x] Documentation / breaking changes
    • layouts
      • frontmatter
      • getLayout
      • context plugin
      • graphql
    • custom pages (needs custom loaders)
    • typescript plugin README
  6. [x] Upstreams
  7. [x] seeing a circular dependency with sucrase? 
        Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/util.js -> ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/readWord.js -> ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js -> ../../../../../node_modules/sucrase/dist/esm/parser/index.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/lval.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/lval.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/lval.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/typescript.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/jsx/index.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/types.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/types.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/expression.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js
    Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js -> ../../../../../node_modules/sucrase/dist/esm/parser/plugins/flow.js -> ../../../../../node_modules/sucrase/dist/esm/parser/traverser/statement.js
  8. [x] Remove default layout content
  9. [x] Collapse /api/ directory - https://github.com/ProjectEvergreen/greenwood/issues/1246

Thoughts / Questions

  1. [x] (breaking) APIs in the pages/ directory? - Yes - https://github.com/ProjectEvergreen/greenwood/pull/1212#issuecomment-2179580557
    • I think so, to not "leak" as much greenwood to the user, and to avoid routing conflicts
  2. [x] (breaking) remove default content? - Yes - https://github.com/ProjectEvergreen/greenwood/pull/1212#issuecomment-2179584581 
    if (body.indexOf('<content-outlet></content-outlet>') > 0) {
  body = body.replace('<content-outlet></content-outlet>', `
    <h1>Welcome to Greenwood!</h1>
  `);
}
  3. [x] Use <slot> instead of <content-outlet>? Or maybe not? - Won't Do
  4. [x] Entire main logic of bundleSsrPages should probably happen in the pool too? Not sure, it worked previously without this particular detail... 🤷‍♂️ - https://github.com/ProjectEvergreen/greenwood/issues/1249

Nice to have / standalone issues

  1. [x] Dynamic / static layouts including context plugins - https://github.com/ProjectEvergreen/greenwood/issues/1248
  2. [x] I think with custom resource types for pages, this should enable .md to be a generic file format so it could become a standalone plugin - https://github.com/ProjectEvergreen/greenwood/issues/1247
  3. [x] Per #1088, templates are currently static only for SSR pages, but would be nice to change that - https://github.com/ProjectEvergreen/greenwood/issues/1248
  4. [x] revisit <!-- greenwood-ssr-start --> implementation - https://github.com/ProjectEvergreen/greenwood/issues/1249
  5. [x] In preRenderCompilationWorker could we consolidate into ONE SSR call? (instead serve + execute-route-module) - https://github.com/ProjectEvergreen/greenwood/issues/1249
    • would this be the same solution needed for pre-rendering in development too?
    • would this tie into the Workers refactor discussion?
  6. [x] prerendering in development - https://github.com/ProjectEvergreen/greenwood/issues/1249
  7. [x] Trailing forward slash configuration (/) - #1176
thescientist13 commented 3 months ago

(breaking) APIs in the pages/ directory? I think so, to not "leak" as much greenwood to the user, and to avoid routing conflicts

So one thing that would be good is to support both "pages" and APIs within this joined directory, e.g

src/
  pages/
     components/
       greeting.js
     api/
       login.js (will be an actual API - /api/login - server rendered)
       login-client.html (will just be an HTML page - /api/login-client/ - static rendered)
     docs/
       login-client.html (will just be an HTML page)
     index.html
     about.js
thescientist13 commented 3 months ago 
if (body.indexOf('<content-outlet></content-outlet>') > 0) {
  body = body.replace('<content-outlet></content-outlet>', `
    <h1>Welcome to Greenwood!</h1>
  `);
}

From our chat today, I think this indeed better placed into the path of our init package / starter kits and templates.

thescientist13 commented 3 months ago

Follow up issue for mixed content in the API pages directory - https://github.com/ProjectEvergreen/greenwood/issues/1246