HTTP Resource Representation Variants

.gitignore

@@ -15,6 +15,5 @@ NOTES
 .DS_Store
 public/*.html
 public/examples
-public/*.es
 public/*.css
 

bin/serve.es

@@ -1 +1,16 @@
-(new (require ('..').Server)).serve `public`
+const
+  { Server, Resource }
+    = require ('..')
+
+, { route }
+    = require ('../middleware')
+
+middleware = [
+  route (`/hello/`, Resource `/resource/fixtures/`)
+, route (`/examples/`, Resource `/examples/`)
+]
+
+void
+
+(new Server (middleware))
+  .serve `public`

bin/test

@@ -1,25 +1,23 @@
 #!/usr/bin/env bash
 
-# Run tape
-
+# https://gist.github.com/branneman/8775568
+# https://gist.github.com/branneman/8048520
 # https://stackoverflow.com/questions/10265798/determine-project-root-from-a-running-node-js-application
-export ROOT=$(pwd)
+
 export PORT=8181
+export ROOT=$(pwd)
 export API="element"
+export NODE_PATH=$ROOT
 export ENTRY="index.test"
-#export API="elements,token-list"
-#export PATHS="{test,middleware,mixins,$ELEMENTS}"
-export MODULES="{.,test,server,middleware,$API}"
-export FILES="$ROOT/$MODULES/$ENTRY"
-export COVERAGE="$ROOT/node_modules/.bin/tap-nyc"
-
-echo "Covering $MODULES"
+export TEST="$ROOT/node_modules/.bin/tape"
+export SPEC="$ROOT/node_modules/.bin/tap-spec"
+export COVER="$ROOT/node_modules/.bin/tap-nyc"
+export LIBRARIES=".,test,server,resource,middleware"
+export TESTS=$ROOT/${1:-"{$LIBRARIES,$API}/$ENTRY"}
 
-# https://gist.github.com/branneman/8775568
-# https://gist.github.com/branneman/8048520
-export NODE_PATH=$ROOT
+echo "Covering $TESTS"
 
-$ROOT/node_modules/.bin/tape \
-  --require ./               \
--- $FILES                    \
- | $COVERAGE
+$TEST          \
+  --require ./ \
+  -- $TESTS    \
+  |  $SPEC

dist/README.md

@@ -3,6 +3,46 @@
 _📖  [Please see `bin/README.md`](../bin/README.md) For a list of `bin` scripts used within the build pipeline._
 
 
+## Glossary
+
+  - [Content Negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation)
+  - [MDN MIME Types List](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)
+  - [MDN HTTP MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
+  - [WHATWG MIME Types](https://html.spec.whatwg.org/#javascript-mime-type)
+  - [WHATWG MIME Sniffing](https://mimesniff.spec.whatwg.org/#javascript-mime-type)
+  - [WHATWG/W3C approval of media types](https://github.com/w3c/webcomponents/issues/645#issuecomment-317338144)
+  - [IETF Media Type Specifications and Registration Procedures _(rfc6838)_](https://tools.ietf.org/html/rfc6838)
+
+
+### ECMAScript Standardization
+
+  Solves the "Duplicate Directory" problem - https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#poly-packages
+
+  - [TC39 - ECMAScript _formerly TC39-TG1)_](https://ecma-international.org/memento/TC39.htm)
+  - [IANA `application/ecmascript` Media Type](https://www.iana.org/assignments/media-types/application/ecmascript)
+  - [IETF ECMAScript Media Types Updates](https://datatracker.ietf.org/doc/draft-bfarias-javascript-mjs/)
+  - [ECMASCript Media Type Specification _(rfc4329 Section 8.2)_](https://tools.ietf.org/html/rfc4329#section-8.2)
+  - [Why you should know `application/ecmascript`](https://stackoverflow.com/questions/9664282/difference-between-application-x-javascript-and-text-javascript-content-types)
+
+
+#### References
+
+  - WHATWG Fetch Preload desitinations and module scripts - https://tools.ietf.org/html/rfc6838
+  - 2Ality Module Specifiers - http://2ality.com/2017/05/es-module-specifiers.html
+  - The state of Webpack modules - https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358
+  - ECMAScript Modules - https://hackernoon.com/node-js-tc-39-and-modules-a1118aecf95e
+  - ESM (ECMAScript Module) Detection in Node.js - https://github.com/nodejs/node/wiki/ES6-Module-Detection-in-Node#detection-problem
+  - Node.js EPS - https://github.com/bmeck/node-eps/blob/a1eab9bf023bbe13a79ddb18f0622a5d57215f9b/002-es-modules.md#461-default-imports
+  - Point script to module script WHATWG - https://github.com/whatwg/html/issues/1013
+  - Correct usage of mime types - https://github.com/bmeck/I-D/issues/16
+
+
+### Javascript Standardization
+
+  - [IANA `application/javascript` Media Type](https://www.iana.org/assignments/media-types/application/javascript)
+  - [Javascript Media Type Specification _(rfc4329 Section 7.2)_](https://tools.ietf.org/html/rfc4329#section-7.2)
+
+
 ## `snuggsi.min.es.br`
 
 *Mime Type* : `application/ecmascript` _([Specification](https://tools.ietf.org/html/rfc4329#section-8.2))_
@@ -17,12 +57,8 @@ _📖  [Please see `bin/README.md`](../bin/README.md) For a list of `bin` script
 *Weight* : ~ 1,600 OCTETS _(1.6kiloBytes)_
 
 
-## Glossary
-  - [Content Negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation)
-  - [Javascript MIME types](https://html.spec.whatwg.org/#javascript-mime-type)
-  - [Scripting Media Types _(rfc4329)_](https://www.rfc-editor.org/rfc/rfc4329.txt)
-  - [WHATWG/W3c approval of media types](https://github.com/w3c/webcomponents/issues/645#issuecomment-317338144)
-  - [why you should know `application/ecmascript`](https://stackoverflow.com/questions/9664282/difference-between-application-x-javascript-and-text-javascript-content-types)
+### Networking
+
   - [Difference between Ethernet frame and Packet](https://www.youtube.com/watch?v=wcSee63SIlg)
   - [MTU _(Maximum Transmission Unit)_](https://en.wikipedia.org/wiki/Maximum_transmission_unit)
   - [_(Ethernet)_ Frame](https://en.wikipedia.org/wiki/Ethernet_frame)

examples/README.md

@@ -1,14 +1,22 @@
 # snuggsi ツ - Easy Web Components
 
+**Create RealWorld App**
+
+https://github.com/koajs/koa/issues/979
+https://github.com/gothinkster/realworld
+
+
 ## [Component Registry](http://snuggsi.herokuapp.com/examples)
 
+
 ## The Template
 
 See [MDN <template>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
 for more details
 
   - `<template>`
 
+
 ## Custom Elements
 
   - `<hello-world>`
@@ -25,6 +33,7 @@ for more details
   - `<drag-drop>`
   - `<ping-pong>`
 
+
 ## Web Components
 
   - `<skype-clone>`

examples/index.es

@@ -1,5 +1,7 @@
-console.warn ('this is coming from examples wohoo')
+module.exports =
 
-const
-  { routes }
-    = require ('./')
+class {
+  get (context, element) {
+    console.warn ('Getting', element)
+  }
+}

html-link-element/README.md

@@ -23,6 +23,9 @@ The HTML `<link>` element specifies relationships between the current document a
 
   https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
 
+  - WHATWG Fetching - https://fetch.spec.whatwg.org/#fetching
+  - WHATWG Initializing context/content specific fetch defaults https://github.com/whatwg/fetch/issues/43
+  - WHATWG Obtaining a link element - https://w3c.github.io/html/document-metadata.html#obtain
   - W3C Preload https://github.com/w3c/preload
   - W3C Preload https://github.com/w3c/preload/issues/92
   - W3C Preload Tests - https://w3c-test.org/preload
@@ -37,6 +40,8 @@ The HTML `<link>` element specifies relationships between the current document a
     - Core   - https://gist.github.com/aFarkas/34dde117000ec7075053#file-preload-core-js
     - Script - https://gist.github.com/aFarkas/34dde117000ec7075053#file-preload-as-script-js
     - Style  - https://gist.github.com/aFarkas/34dde117000ec7075053#file-preload-as-style-js
+    - Firefox "Accept Header for images has been simplified" - https://www.fxsitecompat.com/en-CA/docs/2016/accept-header-for-images-has-been-simplified/
+
 
 #### Preload Use Cases
 
@@ -46,7 +51,6 @@ The HTML `<link>` element specifies relationships between the current document a
 
   - Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1405761
 
-
 ### Prefetch
 
   - IE11 Support for Prerender / Prefetch - https://msdn.microsoft.com/en-us/library/dn265039(v=vs.85).aspx
@@ -57,8 +61,6 @@ The HTML `<link>` element specifies relationships between the current document a
   - IE11 Support for Prerender / Prefetch - https://msdn.microsoft.com/en-us/library/dn265039(v=vs.85).aspx
 
 
-
-
 ## Onload
 
   Why `GlobalEventHandlers.onload`?
@@ -83,7 +85,9 @@ The HTML `<link>` element specifies relationships between the current document a
 
 ## Implementation Tickets
 
-  - Chromium Bugs - https://bugs.chromium.org/p/chromium/issues/detail?id=67522
+  - Link rel preload as attribute doesn't support document value - https://bugs.chromium.org/p/chromium/issues/detail?id=593267
+  - (Chrome) Centralize the setting of Accept headers - https://chromium.googlesource.com/chromium/src/+/1f3d63b1d496218b7c90a27dd1699560592a6dcc
+  - Implement load event for `link` element - https://bugs.chromium.org/p/chromium/issues/detail?id=67522
   - https://bugzilla.mozilla.org/show_bug.cgi?id=185236
   - Load CSS - https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
   - CSS Preload - https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js

index.es

@@ -1,5 +1,6 @@
 require ('./polyfills')
 
 module.exports = {
-  Server : require ('server')
+  Resource : require ('resource')
+, Server   : require ('server')
 }

index.html

@@ -4,7 +4,7 @@
 
 <meta
   name=viewport
-  content='width=device-width,initial-scale=1'
+  content='user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height'
 >
 <link
   as=style
@@ -16,9 +16,11 @@
   href=/index.css
   rel='preload stylesheet'
 >
+<!--
 <link
   as=fetch
   rel=preload
+  type=text/html
   id=github-ribbon
   href=/examples/github-ribbon
 >
@@ -27,6 +29,7 @@
   rel=preload
   id=header-group
   href=/examples/header-group>
+-->
 
 
 <style>
@@ -374,7 +377,7 @@ <h2 slot=header>
 
 </nav>
 
-<main>
+<main role=main>
 
 <section view id=installation>
   <h1>Easy Installation</h1>
@@ -928,7 +931,7 @@ <h3>Further Learning</h3>
 
 </aside>
 
-<footer>
+<footer role=contentinfo>
   <header><a title=snuggsi.esツ href=/>snuggsi.esツ</a></header>
 
   <em>Copyright &copy; 2018 A <strong>devPunks</strong> project</em>

index.test

@@ -2,7 +2,7 @@ const
   { test }
     = require ('test')
 
-, { Test, Server }
+, { Test, Server, Resource }
     = require ('.')
 
 
@@ -12,3 +12,7 @@ test ('snuggsi.Test',
 
 test ('snuggsi.Server',
   t => { t.assert (Server), t.end () })
+
+
+test ('snuggsi.Resource',
+  t => { t.assert (Resource), t.end () })

middleware/README.md

@@ -13,6 +13,13 @@ Middleware used for CSP (Content Security Policy).
   - https://medium.com/square-corner-blog/content-security-policy-for-single-page-web-apps-78f2b2cf1757
   - https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet
 
+## snuggsi.route
+
+Used for routing.
+
+  - https://www.w3.org/Provider/Style/URI.html
+  - Why you should always add a trailing `/` - https://cdivilly.wordpress.com/2014/03/11/why-trailing-slashes-on-uris-are-important/
+
 
 ## snuggsi.browse
 
@@ -23,6 +30,15 @@ Middleware used for developer tools like browsersync and browser extensions.
 
 Middleware used for Content Negotiaton.
 
+  - https://github.com/w3c/preload/issues/113
+  - https://github.com/whatwg/mimesniff/issues/42
+  - Oye vey! https://wiki.whatwg.org/wiki/Why_not_conneg
+  - Media Types (part II) rfc2046 - https://www.ietf.org/rfc/rfc2046
+  - MIME (Multipurpose Internet Mail Extensions) Types (part I) rfc2045 - https://www.ietf.org/rfc/rfc2045
+  - Picking the right mime type - https://www.maxcdn.com/one/tutorial/mime-types/
+  - Require servers to use `text/javascript` - https://github.com/whatwg/html/pull/3096
+  - MDN HTTP MIME Types - https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+
 
 ## snuggsi.compressor
 

middleware/assets.es

@@ -1,3 +1,10 @@
-module.exports = path =>
-  require ('koa-static')
-    ( path, { defer: true } )
+const
+  route
+    = require ('./route')
+
+, Resource
+    = require ('resource')
+
+
+module.exports =
+  path => route ('/', Resource (`/${path}/`))

middleware/assets.test

@@ -1,31 +1,27 @@
 const
-  { test, browse, get }
+  { test, fetch }
     = require ('test')
 
 , { assets }
     = require ('.')
 
-, Server
-    = require ('server')
-
-, request
-   = require ('request')
+, { Server }
+    = require ('..')
 
 
 test ('random location of assets')
 
-test ('assets', t => {
+test ('assets', async t => {
 
   const
     server
       = (new Server).serve ``
 
-  request
-    .get ('http://localhost:8181', response => { })
+  await fetch ('http://localhost:8181')
 
 
   t.ok (true)
 
-  server.close ()
+  server.close ``
   t.end ()
 })