Components (HTML/JS)

[devlinjunker]

Description

Trying to break out separate UI sections and code into smaller "components" that can be added to HTML Pages and are re-usable. We want to also maybe include each of these in the styleguide (todo later)

Set up a basic todo list example app in another folder with a new js entry point

It seems like we can have two different types of components/templates

1. static -- that are built during the webpack compile and included in the page (e.g. header)
2. dynamic -- that are imported/required in javascript files and render html and change based on the users actions/setting (e.g. todo and add-input)

Important changes here

Related

N/A

Visual

TODO

• [x] underscore-webpack-loader for static templates (no JS)
• [x] Handlebars for dynamic components (bb39c3c and #23)
• [x] Rename src/components/ to src/static for static HTML components
• [x] header partial param for adding class to current page header link (bb39c3c)
• [x] icons in handlerbars components (36d6824 and db646b2)
• [x] style todo app (08db5f2)
• [x] footer static component (#22)
  • docs
  • github
  • api?
  • contact info?
  • build/version info (hidden)
    • branch
    • commit?
    • datetime of build
  • copyright?
• [x] Updated READMEs
  • add README.component.md in src/todo/component
    • can be either in subdir or top level
  • add README.model.md in src/todo/model
    • also either subdir or top level
  • readme.loaders.md
  • README.static.md
    • macros
  • update README.entry.md on notes on html entry's
• [x] Reactive handlebars for events? seems way out of date
  • https://github.com/hadijaveed/reactive-handlebars
  • https://medium.com/@hadijaveed/writing-reactive-templates-with-handlebarsjs-c163a2816510
• [x] Hierarchical Components
• [x] Better Event Handling/Rendering setup
  • Think we should figure out a framework in a different Repo....
  • see notes: https://github.com/devlinjunker/template.webpack.fend/pull/23/files#diff-5ed0e14e21a91f683c6c72d5447771a7R25
• [x] Partial File Linting/Formatting
  • Prettydiff? installed, but doesn't really lint html files, only beautifies them
  • Require " for attributes
• [x] PR Body

[devlinjunker]

I think we might want to use this webpack-underscore-loader for the static templates (may want to rename the top level components/ directory to something like static/.

Then we can use handlebars maybe for dynamic templates/components, this will make it easy to use Fractal for a styleguide

[devlinjunker]

It looks like handlebars can be used for both the compiled “static” and rendered “component” templates (again I think we should make the difference being wether or not javascript is included/needed for them)

In handlebars they are called dynamic partials, where we can pass values in through the handlebar partial parameters

[devlinjunker]

So handlebars is great for templating the HTML and structure of the page.... However for now, I am just using vanilla JS and functions to create the DOM and attach handlers to elements but this still feels clunky... https://github.com/devlinjunker/template.webpack.fend/pull/11/files#diff-99f85621a787732f493ae3952ad09617R25

https://github.com/hadijaveed/reactive-handlebars looks interesting for managing handlers and updating the DOM when properties change... added some todos about that

also https://medium.com/@hadijaveed/writing-reactive-templates-with-handlebarsjs-c163a2816510

[devlinjunker]

Got svg icons to be inlined during build process on simple handlebars partials: https://github.com/devlinjunker/template.webpack.fend/pull/11/commits/36d682405d656eb05638732d3175364cc237628a

Quite the task to figure out how to precompile the handlebars partials to in-line svgs

Q: Will this work on larger things?

Tests:

• [x] App Container partial?

  • each on todo list

  • todo partial rather than importing to js file?
• [x] multiple icons
• [x] complicated hierarchy, icons in partial that other handlebar partial uses (same as first point?)

[devlinjunker]

Styling:

• [x] input
• [x] checkbox component?
  • could be used to test complicated hierarchy (prev comment)

[devlinjunker]

TODO Create Separate PRS into this one for each new idea (help keep code changes small -- eventually this will be a huge PR but you can go through smaller ones to see the individual changes)

[devlinjunker]

Q: Should we just create html-inline-loader (html-svg-inline-loader?)

• run on all html and hbs files
• looks for @inline() and replaces with contents of file? just svg?
• return contents of file called on (html/hbs) not wrapped in module.exports
• Q: if we compress js file after using this, all repeat svgs will be replaced right?

[devlinjunker]

progress report:

[devlinjunker]

Attempting Partial Linting:

• tried prettydiff, installed, but doesn't look like it really lints html files, only beautifies them
• also tried ember-template-lint: https://www.npmjs.com/package/ember-template-lint
  • saw errors while trying to parse some templates (no partials, no block helpers?)
  • looks like these are due to glimmer vm and html tokenizer/parsing:
    • https://github.com/ember-template-lint/ember-template-lint/issues/486#issuecomment-419304956
    • https://github.com/ember-template-lint/ember-template-lint/issues/719#issuecomment-497000535

      
      ./src/components/form/checkbox.hbs
      18:6  error  A block may only be used inside an HTML element or another block.  undefined

./src/components/list/list-item.hbs 2:2 error Handlebars partials are not supported: "{{> (lookup . 'template')" at L2:C2 undefined

- looked into html linters but couldn't find any that looked like small libraries and/or didn't require access to the internet to validate