This package has been moved

Use the new oc-template-elm template on vite-templates

oc-template-elm

Elm template for the OpenComponents template system

---

Packages included in this repo

Name	Version
oc-template-elm
oc-template-elm-compiler

Usage:

Initialize a component with the oc-template-react and follow the CLI instructions

$ npx oc init my-awesome-oc oc-template-elm
$ cd my-awesome-oc
$ npm install

Ports

Your Elm component will have access to two ports by default, if you want to use them.

-- To do a oc.getData request passing your properties
port getData : E.Value -> Cmd msg

-- A listener after the oc.getData request finishes. It will be up to you to decode errors you may get.
port dataReceiver : (E.Value -> msg) -> Sub msg

Custom ports

So what can you do if you want to have extra custom ports? (Maybe to listen to OC events). In that case you can use an additional optional property in the OC object to point to a JavaScript (or TypeScript) file, inside the files property.

{
  "oc": {
    "files": {
      "data": "src/server.ts",
      "template": {
        "src": "src/Main.elm",
        // You don't have to define this one if not needed.
        "js": "src/custom.js",
        "type": "oc-template-elm"
      }
    }
  }
}

Then, on that file, just export default a function that will take your Elm app as a parameter, like so:

/// src/custom.js

export default (app) => {
  window.oc.events.on('myEvent', (event) => {
    // Elm will get event data on that port!
    app.ports.myPortReceiver.send(event.data);
  });
};

Missing features

• Server side rendering