Initial commit

Author: rnons

.gitignore

@@ -0,0 +1,8 @@
+.cache
+bower_components
+dist
+node_modules
+
+.spago
+generated-docs
+output

LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2020, Nonbili Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

example/index.html

@@ -0,0 +1,7 @@
+<h1>Use Halogen component as a custom element</h1>
+
+<p>The following text is rendered by a Halogen component</p>
+
+<halogen-hello></halogen-hello>
+
+<script src="main.js"></script>

example/main.js

@@ -0,0 +1,3 @@
+import Main from "./output/Main";
+
+Main.main();

example/packages.dhall

@@ -0,0 +1,8 @@
+let upstream =
+      https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200127/packages.dhall sha256:06a623f48c49ea1c7675fdf47f81ddb02ae274558e29f511efae1df99ea92fb8
+
+let overrides = {=}
+
+let additions = {=}
+
+in  upstream // overrides // additions

example/spago.dhall

@@ -0,0 +1,5 @@
+{ name = "purescript-halogen-custom-element"
+, dependencies = [ "console", "effect", "halogen" ]
+, packages = ./packages.dhall
+, sources = [ "../src/**/*.purs", "src/**/*.purs" ]
+}

example/src/Hello.purs

@@ -0,0 +1,39 @@
+module Hello
+  ( Message(..)
+  , Query
+  , Action
+  , component
+  ) where
+
+import Prelude
+
+import Data.Const (Const)
+import Effect.Aff (Aff)
+import Halogen as H
+import Halogen.HTML as HH
+
+type Message = Void
+
+type Query = Const Void
+
+type Action = Void
+
+type HTML = H.ComponentHTML Action () Aff
+
+type DSL = H.HalogenM State Action () Message Aff
+
+type State = Unit
+
+initialState :: State
+initialState = unit
+
+render :: State -> HTML
+render state =
+  HH.text "hello"
+
+component :: H.Component HH.HTML Query Unit Message Aff
+component = H.mkComponent
+  { initialState: const initialState
+  , render
+  , eval: H.mkEval $ H.defaultEval
+  }

example/src/Main.purs

@@ -0,0 +1,11 @@
+module Main where
+
+import Prelude
+
+import Effect (Effect)
+import Halogen.CustomElement as CustomElement
+import Hello (component)
+
+main :: Effect Unit
+main = do
+  CustomElement.define "halogen-hello" component

src/CustomElement.js

@@ -0,0 +1,8 @@
+exports.define_ = name => render => () => {
+  class HalogenElement extends HTMLElement {
+    connectedCallback() {
+      render(this)();
+    }
+  }
+  customElements.define(name, HalogenElement);
+};

src/CustomElement.purs

@@ -0,0 +1,26 @@
+module Halogen.CustomElement
+  ( define
+  ) where
+
+import Prelude
+
+import Effect (Effect)
+import Effect.Aff (Aff)
+import Halogen as H
+import Halogen.Aff as HA
+import Halogen.HTML as HH
+import Halogen.VDom.Driver as Driver
+import Web.HTML (HTMLElement)
+
+foreign import define_ :: String -> (HTMLElement -> Effect Unit) -> Effect Unit
+
+define
+  :: forall query output
+   . String
+  -> H.Component HH.HTML query Unit output Aff
+  -> Effect Unit
+define name component = do
+  define_ name render
+  where
+  render el =
+    HA.runHalogenAff $ Driver.runUI component unit el