purescript-halogen · srghma · May 13, 2020 · May 13, 2020 · May 13, 2020 · May 14, 2020
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,6 @@ package-lock.json
 /bower_components/
 /node_modules/
 /output/
+/app.js
+/hydration-test.js
+/yarn-error.log
diff --git a/HOW_DOM_ATTRIBUTES_AND_PROPERTIES_WORK.md b/HOW_DOM_ATTRIBUTES_AND_PROPERTIES_WORK.md
@@ -0,0 +1,41 @@
+# How .attributes work
+
+`$0.attributes` are:
+- <input required> is { required: "" }
+- <input required="false"> is { required: "false" }
+- <td colspan="1"> is { colspan: "1" }, but prop is colSpan = 1
+- <div foo:data-foo="1"> is { "foo:data-foo": "1" }
+
+# Properties
+
+```
+Having `<input type="text" value="foo1">`
+If do `$0.required = true` in chrome.
+  THE html `<input type="text" value="foo1" required>`
+  THE $0.attributes = { required: "true" }
+```
+
+```
+Having `<input type="text" value="foo1" required>`
+If do `$0.required = false` in chrome.
+  THE html `<input type="text" value="foo1">`
+  THE $0.attributes = {}
+```
+
+# How .dataset property works? should we support it?
+
+```
+Having `<div id="1" data-foo="foo" data-bar="bar" data-baz-bak="baz-bak" data-someint="1"></div>`
+  The `$0.attributes`
+    `NamedNodeMap { id: "1", data-foo: "foo", data-bar: "bar", data-baz-bak: "baz-bak", someint: "1" }`
+  The `$0.dataset`
+    `DOMStringMap { foo: "foo", bar: "bar", bazBak: "baz-bak", someint: "1" }`
+```
+
+Also, react doesnt support dataset property during hydration. Proof:
+
+- server = `<div id="1" data-foo="foo">`
+- client = `<div id="1" dataset={{ foo : "foo" }}></div>`
+- errorMessage = `Prop `dataset` did not match. Server: "null" Client: "[object Object]"`
+
+thus, react does support `data-***` attributes, but doesn't support `dataset` property, so why bother with supporting `dataset` property?
diff --git a/hydration-test.html b/hydration-test.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="description" content="DBMON HALOGEN-VDOM" />
+  <meta charset="utf-8">
+  <title>hydration test</title>
+
+  <style>
+  .component { background-color: aquamarine; }
+  .label1 { color: red; }
+  .label2 { color: blue; }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <div class="component"><div class="label1">test label 1</div><div class="label2">test label 2</div></div>
+  </div>
+
+  <button id="update-state-button">Update state</button>
+  <script src="hydration-test.js"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -3,7 +3,11 @@
   "scripts": {
     "clean": "rimraf output && rimraf",
     "test": "pulp build -I test -- --censor-lib --strict",
-    "build": "pulp build -- --censor-lib --strict"
+    "build": "pulp build -- --censor-lib --strict",
+    "spago:test": "spago bundle-app --main Test.Main --to app.js",
+    "spago:hydration-test": "spago bundle-app --main Test.Hydration --to hydration-test.js",
+    "spago:test:watch": "yarn run spago:test --watch",
+    "spago:hydration-test:watch": "yarn run spago:hydration-test --watch"
   },
   "devDependencies": {
     "pulp": "^15.0.0",

diff --git a/packages.dhall b/packages.dhall
@@ -0,0 +1,128 @@
+{-
+Welcome to your new Dhall package-set!
+
+Below are instructions for how to edit this file for most use
+cases, so that you don't need to know Dhall to use it.
+
+## Warning: Don't Move This Top-Level Comment!
+
+Due to how `dhall format` currently works, this comment's
+instructions cannot appear near corresponding sections below
+because `dhall format` will delete the comment. However,
+it will not delete a top-level comment like this one.
+
+## Use Cases
+
+Most will want to do one or both of these options:
+1. Override/Patch a package's dependency
+2. Add a package not already in the default package set
+
+This file will continue to work whether you use one or both options.
+Instructions for each option are explained below.
+
+### Overriding/Patching a package
+
+Purpose:
+- Change a package's dependency to a newer/older release than the
+    default package set's release
+- Use your own modified version of some dependency that may
+    include new API, changed API, removed API by
+    using your custom git repo of the library rather than
+    the package set's repo
+
+Syntax:
+Replace the overrides' "{=}" (an empty record) with the following idea
+The "//" or "⫽" means "merge these two records and
+  when they have the same value, use the one on the right:"
+-------------------------------
+let overrides =
+  { packageName =
+      upstream.packageName // { updateEntity1 = "new value", updateEntity2 = "new value" }
+  , packageName =
+      upstream.packageName // { version = "v4.0.0" }
+  , packageName =
+      upstream.packageName // { repo = "https://www.example.com/path/to/new/repo.git" }
+  }
+-------------------------------
+
+Example:
+-------------------------------
+let overrides =
+  { halogen =
+      upstream.halogen // { version = "master" }
+  , halogen-vdom =
+      upstream.halogen-vdom // { version = "v4.0.0" }
+  }
+-------------------------------
+
+### Additions
+
+Purpose:
+- Add packages that aren't already included in the default package set
+
+Syntax:
+Replace the additions' "{=}" (an empty record) with the following idea:
+-------------------------------
+let additions =
+  { package-name =
+       { dependencies =
+           [ "dependency1"
+           , "dependency2"
+           ]
+       , repo =
+           "https://example.com/path/to/git/repo.git"
+       , version =
+           "tag ('v4.0.0') or branch ('master')"
+       }
+  , package-name =
+       { dependencies =
+           [ "dependency1"
+           , "dependency2"
+           ]
+       , repo =
+           "https://example.com/path/to/git/repo.git"
+       , version =
+           "tag ('v4.0.0') or branch ('master')"
+       }
+  , etc.
+  }
+-------------------------------
+
+Example:
+-------------------------------
+let additions =
+  { benchotron =
+      { dependencies =
+          [ "arrays"
+          , "exists"
+          , "profunctor"
+          , "strings"
+          , "quickcheck"
+          , "lcg"
+          , "transformers"
+          , "foldable-traversable"
+          , "exceptions"
+          , "node-fs"
+          , "node-buffer"
+          , "node-readline"
+          , "datetime"
+          , "now"
+          ]
+      , repo =
+          "https://github.com/hdgarrood/purescript-benchotron.git"
+      , version =
+          "v7.0.0"
+      }
+  }
+-------------------------------
+-}
+
+
+let upstream =
+      /home/srghma/projects/package-sets/src/packages.dhall
+
+let overrides = {=}
+
+let additions = {=}
+
+in  upstream // overrides // additions
diff --git a/spago.dhall b/spago.dhall
@@ -0,0 +1,28 @@
+{-
+Welcome to a Spago project!
+You can edit this file as you like.
+-}
+{ name = "halogen-vdom"
+, dependencies =
+  [ "bifunctors"
+  , "console"
+  , "effect"
+  , "exists"
+  , "foreign"
+  , "foreign-object"
+  , "js-timers"
+  , "maybe"
+  , "prelude"
+  , "psci-support"
+  , "refs"
+  , "tuples"
+  , "unsafe-coerce"
+  , "web-html"
+  , "web-dom"
+  , "strings"
+  , "control"
+  , "lazy"
+  ]
+, packages = ./packages.dhall
+, sources = [ "src/**/*.purs", "test/**/*.purs" ]
+}
diff --git a/src/Halogen/VDom.purs b/src/Halogen/VDom.purs
@@ -4,6 +4,6 @@ module Halogen.VDom
   , module Types
   ) where
 
-import Halogen.VDom.DOM (VDomSpec(..), buildVDom) as DOM
+import Halogen.VDom.DOM (VDomSpec(..), VDomSpecWithHydration(..), buildVDom, hydrateVDom) as DOM
 import Halogen.VDom.Machine (Machine, Step, Step'(..), mkStep, unStep, extract, step, halt) as Machine
 import Halogen.VDom.Types (VDom(..), Graft, runGraft, ElemName(..), Namespace(..)) as Types
diff --git a/src/Halogen/VDom/Attributes.js b/src/Halogen/VDom/Attributes.js
@@ -0,0 +1,3 @@
+exports.attributes = function (el) {
+  return el.attributes;
+};
diff --git a/src/Halogen/VDom/Attributes.purs b/src/Halogen/VDom/Attributes.purs
@@ -0,0 +1,19 @@
+module Halogen.VDom.Attributes where
+
+import Prelude (Unit)
+
+import Web.DOM.Element as DOM
+import Effect.Uncurried as EFn
+import Unsafe.Coerce (unsafeCoerce)
+import Halogen.VDom.Util as Util
+
+data NamedNodeMap
+
+foreign import attributes ∷ DOM.Element → NamedNodeMap
+
+forEachE
+  ∷ EFn.EffectFn2
+      NamedNodeMap
+      (EFn.EffectFn1 { name :: String } Unit)
+      Unit
+forEachE = unsafeCoerce Util.forEachE