Rfc/issue 355 no bundle development

[thescientist13]

Related Issue

uses #355 of bundle-less development as a base to re-design the project from the ground as prototyped in this POC repo and now uses . The new vision is to be more HTML based and try align more with the native practices and patterns of the web instead of doing it all through JS / webpack, like using import maps in development instead of bundlers, <script type="module">, and generating more ESM friendly output using Rollup.

Right now only the home page is migrated and no GraphQL / SPA yet...

This is presented in the context of a proposed 1.0 And Beyond Roadmap

This also fixes (intentionally or unintentionally)

• Lighthouse 100
• Dedupe content in JS shouldn't be an issue now
• cant resolve css file with custom workspace
• prod and develop modes

This also invalidates the following issues

• webpack config enhancements not needed now
  • this neither?
  • or this
  • or webpack 5
  • double reload
  • scaffolding

Summary of Changes

1. Created a new lifecycle for a Koa server to use when developing and serializing
2. Was able to remove the scaffolding lifecycle
3. Use rollup with some custom created plugins
4. No bundling in development
5. We now have a built in serve command for view production builds locally with no external dependencies

TODOs

1. Duplicate row of <app-cards> when built for production, roll back puppeteer version, or something to do with <slot>? - created instances of <slot>-ed content and lit-element are rendering twice #433
2. Enable build for all pages / app and page templates for production and develop
3. build out header navigation from graph.json
4. Remove usages of execSync in build lifecycle
5. app template example
6. fix favicon.ico loading (using <meta> tag, should be a <link> tag)
7. rollup.config.js TODOs - not needed for this PR
8. Make sure all lifecycles are using Greenwood compilation object
9. Get basic specs / build passing amd update coverage / linting configurations if needed
10. Remove remaining references to webpack - not needed for this PR
11. prettify URLs (strip index.html) and make sure to support root HTML files, e.g. about.html -> /about
12. Replace npx http-server with "bare" Koa server
13. how to import / register a customElement from npm, e.g.' - created handle bare imports in HTML <script> tags when running build command #434

    <script type="module">
      import '@evergreen-wc/eve-container';
    </script>

14. Markdown code blocks not rendering
15. prism.css not found in production build - will do as part of more robust standalone Rollup CSS bundling PR - restore support for CSS bundling (w/Rollup) #427
16. Create release/0.10.0 branch

Questions

1. Keep colors package? - added to final release and questions checklist #428
2. Is a theme.css still needed now from the CLI specifically? - added to final release and questions checklist #428
3. Keep cli/templates? (+clean up context lifecycle) - added to final release and questions checklist #428
4. How to handle shelf nav click / sub nav display? Use <detail>? - created ensure correct working order of website and expected styles (e.g. shelf and scrolling, docs, markdown plugins, etc) #432

Known Issues

These will be solved in another PR as part of the [**Feature Parity]

• Shelf doesn't correctly scroll / styles are a little of until sub nav display logic is addressed - see ensure correct working order of website and expected styles (e.g. shelf and scrolling, docs, markdown plugins, etc) #432
• Header / Shelf is out of order
• some styles aren't "there" and will be restored when adding back PostCSS - restore Babel / PostCSS / Browserslist for no bundle development #426
• restore all markdown capabilities

[thescientist13]

Spent a little time looking at the double rendering of <eve-card> and I think this may be related to LitElement.

The serialized output is pretty much the same but it looks like in this branch, the content that should be in the Shadow DOM is duplicated in the Light DOM, where on the current site only the static content is in the light DOM.

Prod

  <eve-row class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      
    <eve-card title="webpack" img="/assets/webpack.svg" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/webpack.svg" alt="webpack">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->webpack<!----></h3>
      
        <div class="body style-scope eve-card">
          
      To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack
      under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
    
        </div>
      </div>
    <!----></eve-card>
    <eve-card title="Web Components" img="/assets/webcomponents.svg" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/webcomponents.svg" alt="Web Components">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->Web Components<!----></h3>
      
        <div class="body style-scope eve-card">
          
      Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
    
        </div>
      </div>
    <!----></eve-card>
    <eve-card title="NodeJS" img="/assets/nodejs.png" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/nodejs.png" alt="NodeJS">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->NodeJS<!----></h3>
      
        <div class="body style-scope eve-card">
          
      Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
    
        </div>
      </div>
    <!----></eve-card>
  
    <!----></eve-row>

Now

<app-row><!---->
      
                  <app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/webpack.svg" alt="webpack">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->webpack<!----></h3>
      
        <div class="body style-scope app-card">
          
                    To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack
                    under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
                  
        </div>
      </div>
    <!----></app-card>
                  <app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/webcomponents.svg" alt="Web Components">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->Web Components<!----></h3>
      
        <div class="body style-scope app-card">
          
                    Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
                  
        </div>
      </div>
    <!----></app-card>
                  <app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/nodejs.png" alt="NodeJS">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->NodeJS<!----></h3>
      
        <div class="body style-scope app-card">
          
                    Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
                  
        </div>
      </div>
    <!----></app-card>
                
    <!----></app-row>

---

Has to do with something regarding Shadow DOM and possibly nested <slot> possibly and If I comment out the <script> tag for card.js in the serialized index.html, there is no issues, so seems JavaScript / lit related.

Couple things to look into

• same version of lit-element
• downgrade version puppeteer
• try just using HTMLElement
• try with unserialized index.html contents

[thescientist13]

Here's some initial benchmarking of the Getting Started page

Prod

Here

Bulk of the JS coming from raw graph.json, but still scores a 💯 😄 . Pretty big improvement though!

[thescientist13]

Pretty cool now, if I load up the build output of the Getting Started case, there's basically no overhead anymore. This is just running locally, too.

compared to the live site

---

If anything, the font is what's weighing it down, and could maybe be optimized to use <link prefetch> at least? Will track as part of general list of optimizations I keeping notes on.

[thescientist13]

Opening / closing to trigger a build