Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rfc/issue 955 layouts and pages #1212

Merged
merged 24 commits into from
Jun 22, 2024

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented Mar 16, 2024

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. rebase against release branch (and reconcile Lit polyfill refactoring)
  2. confirm bug fixes are fixed downstream with TT - Feature/issue 82 social links bar AnalogStudiosRI/www.tuesdaystunes.tv#115
  3. Custom elements as layouts
  4. Additional languages (e.g. TS, markdown) for pages as
    • static pages
    • dynamic pages + .ts example
    • APIs
  5. Documentation / breaking changes
    • layouts
      • frontmatter
      • getLayout
      • context plugin
      • graphql
    • custom pages (needs custom loaders)
    • typescript plugin README
  6. Upstreams
  7. 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. Remove default layout content
  9. Collapse /api/ directory - enable mixed content in the API pages directory #1246

Thoughts / Questions

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

Nice to have / standalone issues

  1. Dynamic / static layouts including context plugins - dynamic runtime layouts for SSR #1248
  2. 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 - standalone unifiedjs based markdown plugin #1247
  3. Per evaluate (remove) use of Workers for SSR and prerendering #1088, templates are currently static only for SSR pages, but would be nice to change that - dynamic runtime layouts for SSR #1248
  4. revisit <!-- greenwood-ssr-start --> implementation - support prerender during development #1249
  5. In preRenderCompilationWorker could we consolidate into ONE SSR call? (instead serve + execute-route-module) - support prerender during development #1249
    • would this be the same solution needed for pre-rendering in development too?
    • would this tie into the Workers refactor discussion?
  6. prerendering in development - support prerender during development #1249
  7. Trailing forward slash configuration (/) - configuration option for trailing forward slash #1176

@thescientist13 thescientist13 added RFC Proposal and changes to workflows, architecture, APIs, etc CLI labels Mar 16, 2024
@thescientist13 thescientist13 self-assigned this Mar 16, 2024
@thescientist13 thescientist13 changed the base branch from master to release/0.30.0 March 16, 2024 16:57
@thescientist13 thescientist13 added breaking bug Something isn't working labels Mar 16, 2024
@thescientist13 thescientist13 force-pushed the rfcs/issue-955-layouts-and-pages branch from ab0ae10 to 31f8f35 Compare March 16, 2024 18:17
@thescientist13 thescientist13 added the documentation Greenwood specific docs label Mar 16, 2024
@thescientist13 thescientist13 added the Plugins Greenwood Plugins label Mar 16, 2024
@thescientist13 thescientist13 added the question Further information is requested label May 19, 2024
@thescientist13 thescientist13 force-pushed the rfcs/issue-955-layouts-and-pages branch from d5fb5c6 to 796d713 Compare May 19, 2024 23:37
thescientist13 and others added 13 commits June 2, 2024 14:02
* isolation mode for SSR pages and API routes for greenwood serve

* documentation for isolation mode option and global config test case

* misc refactoring

* set isolation mode to true for Lit renderer plugin

* set isolation mode to true for Lit renderer plugin
…1186)

* Issue-1118: Refactor rollup config generation for APIs

* Issue-1118: Refactor rollup config generation for SSR

* Issue-1118: Refactor forEach to use for-in for the ssr config generation

* Issue-1118: Convert forEach to for..in

* Issue-1118: Remove unused code

* refactor away bundling work arounds and add comments

* refactor SSR page bundling to avoid hacky entry point placeholder hack

* patch custom element registry check from wcc

* refactor SSR page output name from .entry to .route

* document breaking changes for adapter plugins

* refactor import meta relative asset path escaping

* refactor API routes and adapters for mapped API bundles

* misc refactoring and docs update

* latest WCC patches

* windows compatibility

* update adapter docs example

* remove patches

---------

Co-authored-by: Owen Buckley <[email protected]>
* intial draft of import attributes support for CSS and JSON

* all test cases passing

* need patch package

* wcc patches for import attributes and CSSStylesheet shim

* bump min NodeJS version for exp specs

* temp disable ESLint

* develop based import assertion specs

* serve based import attributes specs

* add preIntercept resource plugin lifecycle and refactor PostCSS to use it

* all test cases passing for import attributes support

* refactor built in CSS and JSON intercepting

* demo code

* raw plugin docs and package.json updates

* update latest documentation for custom loaders support in NodeJS

* update custom import docs

* upgrade wcc v0.13.0

* only need Node 18 for github actions

* css imports and raw plugin interop with test cases

* lit renderer import attribute test cases and documentation

* refactor matchers support for raw plugin instead of patching and add test cases

* disable describe.only

* update usage for custom resource plugins to showcase usage of import attributes

* document preIntercept lifecycle and convert Babel to use it

* restore ESLint

* enable debug logging for failing specs

* refactor theme pack specs

* fix linting

* remove CSS and JSON packages from being publishable

* clean up console logs and comments

* rename exp test cases to loadersnaming prefix

* fix command in github actions

* remove plugin-import-css callout from plugin-postcss README

* remove demo code from website

* refine PostCSS plugin intercepting
@thescientist13 thescientist13 marked this pull request as ready for review June 18, 2024 02:06
@thescientist13
Copy link
Member Author

(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
Copy link
Member Author

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
Copy link
Member Author

Follow up issue for mixed content in the API pages directory - #1246

@thescientist13 thescientist13 removed the question Further information is requested label Jun 22, 2024
@thescientist13 thescientist13 merged commit 87cdf8d into release/0.30.0 Jun 22, 2024
8 checks passed
@thescientist13 thescientist13 deleted the rfcs/issue-955-layouts-and-pages branch June 22, 2024 16:49
thescientist13 added a commit that referenced this pull request Nov 2, 2024
* feature/discussion 1117 Isolation Mode (v1) (#1206)

* isolation mode for SSR pages and API routes for greenwood serve

* documentation for isolation mode option and global config test case

* misc refactoring

* set isolation mode to true for Lit renderer plugin

* set isolation mode to true for Lit renderer plugin

* enhancement/Issue-1118: Single File Bundles for SSR and API routes (#1186)

* Issue-1118: Refactor rollup config generation for APIs

* Issue-1118: Refactor rollup config generation for SSR

* Issue-1118: Refactor forEach to use for-in for the ssr config generation

* Issue-1118: Convert forEach to for..in

* Issue-1118: Remove unused code

* refactor away bundling work arounds and add comments

* refactor SSR page bundling to avoid hacky entry point placeholder hack

* patch custom element registry check from wcc

* refactor SSR page output name from .entry to .route

* document breaking changes for adapter plugins

* refactor import meta relative asset path escaping

* refactor API routes and adapters for mapped API bundles

* misc refactoring and docs update

* latest WCC patches

* windows compatibility

* update adapter docs example

* remove patches

---------

Co-authored-by: Owen Buckley <[email protected]>

* v0.30.0-alpha.1

* feature/issue 923 native import attributes for CSS and JSON (#1215)

* intial draft of import attributes support for CSS and JSON

* all test cases passing

* need patch package

* wcc patches for import attributes and CSSStylesheet shim

* bump min NodeJS version for exp specs

* temp disable ESLint

* develop based import assertion specs

* serve based import attributes specs

* add preIntercept resource plugin lifecycle and refactor PostCSS to use it

* all test cases passing for import attributes support

* refactor built in CSS and JSON intercepting

* demo code

* raw plugin docs and package.json updates

* update latest documentation for custom loaders support in NodeJS

* update custom import docs

* upgrade wcc v0.13.0

* only need Node 18 for github actions

* css imports and raw plugin interop with test cases

* lit renderer import attribute test cases and documentation

* refactor matchers support for raw plugin instead of patching and add test cases

* disable describe.only

* update usage for custom resource plugins to showcase usage of import attributes

* document preIntercept lifecycle and convert Babel to use it

* restore ESLint

* enable debug logging for failing specs

* refactor theme pack specs

* fix linting

* remove CSS and JSON packages from being publishable

* clean up console logs and comments

* rename exp test cases to loadersnaming prefix

* fix command in github actions

* remove plugin-import-css callout from plugin-postcss README

* remove demo code from website

* refine PostCSS plugin intercepting

* first pass on resource tracking and bundling refactor with lit polyfills removal from CLI

* interim work around to solve double rendering and undefined WCC bugs

* refactor frontmatter for graph and standard html plugin for SSR

* rename templates directory to layouts

* refactor over bundling of static script assets in bundleSsrPages

* handle bundling styles within bundleSsrPages

* post rebase tweaks

* custom elements as layouts

* post rebase tweaks

* WCC patched support for TS pages

* support and tests for API routes as a custom dynamic format

* restore TS tests and make servePage default

* document custom page format support

* fix lint

* patch latest WCC TypeScript changes

* cleanup default app layout content

* handle rollup circular dependency warnings for API routes

* rename test cases from templates to layout

* collapse API routes directory into pages directory

* bump to wc-compiler 0.14.0

---------

Co-authored-by: Paul Barry <[email protected]>
@thescientist13 thescientist13 changed the title Rfcs/issue 955 layouts and pages rfc/issue 955 layouts and pages Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking bug Something isn't working CLI documentation Greenwood specific docs Plugins Greenwood Plugins RFC Proposal and changes to workflows, architecture, APIs, etc SSR
Projects
None yet
2 participants