Skip to content

Instantly share code, notes, and snippets.

💭
Doing things

Matthew Phillips matthewp

💭
Doing things
Block or report user

Report or block matthewp

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View haunted-notes.md

This is a huge release for Haunted, one of the biggest since the initial release. Before getting into features I want to give some appreciate to @jdin, @Gladear, and @chase-moskal who all made tremendous contributions to this release. That cannot go overstated, I did only a small part of this release, the Haunted community is what keeps this project alive. ❤️ 🎃 . Now that the sappy stuff is complete, on to the features!

State API

At its core Haunted is a container for state and lifecycle callbacks that is derived from hooks like useState, useMemo, even useEffect. With the component() API you get more than just that, you also get a scheduler that handles rendering and committing the result.

A lot of people have wanted to use hooks outside of the context of Haunted components. One example is using hooks inside of a LitElement component. The new State API enables this, by exposing the low-level part of Haunted which is its state container.

View nuxt.config.js
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
@matthewp
matthewp / fixture.js
Created Sep 10, 2019
Fixtures and schema merging
View fixture.js
let RelativeDate = {
[Symbol.for("can.new")](value) {
if( date === "yesterday" ) {
return new Date()- 1000*24
}
return date;
},
[Symbol.for("can.isMember")](value) {
return value instanceof Date;
}
View machine.js
function valueEnumerable(value) {
return { enumerable: true, value };
}
function valueEnumerableWritable(value) {
return { enumerable: true, writable: true, value };
}
let truthy = () => true;
let empty = () => ({});
View machine.js
function valueEnumerable(value) {
return { enumerable: true, value };
}
function valueEnumerableWritable(value) {
return { enumerable: true, writable: true, value };
}
let truthy = () => true;
let empty = () => ({});
@matthewp
matthewp / helpers.js
Last active Sep 2, 2019
Filters for eleventy.
View helpers.js
eleventyConfig.addFilter('bareUrl', url => {
return url.substr(1);
});
eleventyConfig.addFilter('baseUrl', url => {
let rel = path.relative(path.dirname(url), '/') || '.';
return rel + '/';
});
@matthewp
matthewp / lit-haunted-element.js
Last active Oct 10, 2019
Haunted State Integration
View lit-haunted-element.js
import { LitElement } from 'lit-element';
import { State } from 'haunted';
export default class LitHauntedElement extends LitElement {
constructor() {
super();
this.hauntedState = new State(() => this.requestUpdate(), this);
}
View constants.js
export const HOLE = 'hole';
export const ASSIGN = 'assign';
@matthewp
matthewp / .gitignore
Created Jul 12, 2019
haunted example
View .gitignore
node_modules/
build/
@matthewp
matthewp / notes.md
Last active Jul 12, 2019
Haunted 4.5.0
View notes.md

👻 Haunted 4.5.0 is out 🎉. This is a pretty big release as it introduces some nice new features:

haunted/core

the new haunted/core entry point is ideal for those who are using a templating library other than lit-html, for example lighterhtml. This has been one of the most requested features for Haunted for a long time. Although Haunted has always worked with hyperHTML, lighterhtml, and others, it always included lit-html even if it was unused.

I didn't like the idea of not including support for a templating library out-of-the-box and forcing configuration on everything, so Haunted still works the easy way with lit-html. The new haunted/core is for people who want a little more control. The haunted export is a function that wires together a render function and produces the component function, createContext, and a few other things. Here's a simple example:

import haunted, { useState } from 'haunted/core';
You can’t perform that action at this time.