3f:null 40:["$","title",null,{"children":"YAML library with JS extensions | Riley | Observable"}] 46:T99a,

basic setup

Don’t want to read through all of the documentation? I get it! If all you want is to use JS objects in YAML, then just import your own version of YAML (or import version ${YAML_version} from this notebook), called YAML in this example, and use this code:

import

import {makeYAMLSchema}
from "@rmw4269/js-yaml"

make schema from js-yaml-js-types*

JSExtSchema = ${makeYAMLSchema.name}.${makeYAMLSchema.makeJSExtSchema.name}(YAML)

make sure to include the schema whenever reading or writing
```
YAML.dump(inputData, {schema: JSExtSchema})
```

47:T17c1,

extension

Two functions accept extension objects in their inputs. This is basically a way to describe a custom type (later constructed with new YAML.Type()) using only basic objects. Below is an example of an extension object. Learn more about defining custom types on the js-yaml example page. In an extension object, each key is the tag string for the type, and each value is the definition object that gets passed as the second argument of the Type constructor.

To make writing extensions easier, you may opt to use makeYAMLSchema.prefixSymbol. When an extension has this symbolic property, all tag strings in the extension are prefixed with the value of that property.

extension format

{
	[makeYAMLSchema.prefixSymbol]: "tag:yaml.org,2002:js/",
	undefined: {
		kind: "scalar",
		resolve: () => true,
		construct: () => undefined,
		predicate: o => typeof o === "undefined",
		represent: () => ""
	}
}

input passed into ${Object.getPrototypeOf(YAML.DEFAULT_SCHEMA).constructor.name}.prototype.${YAML.DEFAULT_SCHEMA.extend.name}

[
	new YAML.Type("${makeYAMLSchema.tagPrefix}undefined", {
		kind: "scalar",
		resolve: () => true,
		construct: () => undefined,
		predicate: o => typeof o === "undefined",
		represent: (	) => ""
	})
]

48:T861,

`${makeYAMLSchema.name}`

Calling ${makeYAMLSchema.name} returns a new YAML schema that will work with the provided parser and serializer. Every type defined in an extension overrides all previous types with the same tag string. If the value of an entry is falsy, then it erases any previous type of the same tag string. For example,

${makeYAMLSchema.name}(YAML, {"${makeYAMLSchema.tagPrefix}example": {⋯}}, {"${makeYAMLSchema.tagPrefix}example": null})

has no effect.

function ${makeYAMLSchema.name}(YAML, base = YAML.DEFAULT_SCHEMA, …extensions)

49:T1379,makeYAMLSchema = { function makeYAMLSchema(YAML, base, ...extensions) { base = base || YAML.DEFAULT_SCHEMA; let types = new Map(); for (let ext of extensions) { let localPrefix = ext[makeYAMLSchema.prefixSymbol]; for (let [tag, dfn] of Object.entries(ext)) { if (tag === makeYAMLSchema.prefixSymbol) { continue; } if (dfn) { types.set(localPrefix ? `${localPrefix}${tag}` : tag, dfn); } else { types.delete(tag); } } } let schema = base.extend([...types].map(([tag, dfn]) => new YAML.Type(tag, dfn) )); types.clear(); return schema; } makeYAMLSchema.tagPrefix = "tag:yaml.org,2002:js/"; Object.defineProperty(makeYAMLSchema, "prefixSymbol", { enumerable: true, value: this?.prefixSymbol || Symbol("YAML tag prefix") }); const JSExtSchemaDfn = { [makeYAMLSchema.prefixSymbol]: makeYAMLSchema.tagPrefix, undefined: { kind: "scalar", resolve: () => true, construct: () => undefined, predicate: o => typeof o === "undefined", represent: () => "" }, regexp: { kind: "scalar", resolve: data => { if (data === null || data.length === 0) { return false; } var regexp = data, tail = /\/([gim]*)$/.exec(data), modifiers = ""; // If regexp starts with '/' it can have modifiers and must be properly closed. if (regexp[0] === "/") { if (tail) modifiers = tail[1]; if (modifiers.length > 3) { return false; } // if expression starts with /, is should be properly terminated if (regexp[regexp.length - modifiers.length - 1] !== "/") { return false; } } return true; }, construct: data => { var regexp = data, tail = /\/([gim]*)$/.exec(data), modifiers = ""; // `/foo/gim` - tail can be maximum 4 chars if (regexp[0] === "/") { tail && (modifiers = tail[1]); regexp = regexp.slice(1, regexp.length - modifiers.length - 1); } return new RegExp(regexp, modifiers); }, represent: object => { var result = "/" + object.source + "/"; object.global && (result += "g"); object.multiline && (result += "m"); object.ignoreCase && (result += "i"); return result; }, predicate: JSExtSchemaProperTypeCheck ? object => object instanceof RegExp : object => Object.prototype.toString.call(object) === "[object RegExp]" }, function: { kind: "scalar", resolve: data => { if (data === null) { return false; } try { var source = `(${data})`, ast = Esprima.parse(source, { range: true }); return !( ast.type !== "Program" || ast.body.length !== 1 || ast.body[0].type !== "ExpressionStatement" || ( ast.body[0].expression.type !== "ArrowFunctionExpression" && ast.body[0].expression.type !== "FunctionExpression" )); } catch { return false; } }, construct: data => { var source = `(${data})`, ast = Esprima.parse(source, { range: true }), params = [], body; if ( ast.type !== "Program" || ast.body.length !== 1 || ast.body[0].type !== "ExpressionStatement" || ( ast.body[0].expression.type !== "ArrowFunctionExpression" && ast.body[0].expression.type !== "FunctionExpression" )) { throw new Error("failed to resolve function"); } for (let param of ast.body[0].expression.params) { params.push(param.name); } body = ast.body[0].expression.body.range; // Parser’s ranges include the first '{' and the last '}' characters on function expressions, so cut them out. if (ast.body[0].expression.body.type === "BlockStatement") { return new Function(params, source.slice(body[0] + 1, body[1] - 1)); } // ES6 arrow functions can omit the BlockStatement. In that case, just return the body. return new Function(params, `return ${source.slice(body[0], body[1])}`); }, predicate: JSExtSchemaProperTypeCheck ? object => typeof object === "function" || object instanceof Function : object => Object.prototype.toString.call(object) === "[object Function]", represent: object => object.toString() } }; makeYAMLSchema.makeJSExtSchema = function makeJSExtSchema(YAML, ...extensions) { return this(YAML, YAML.DEFAULT_SCHEMA, JSExtSchemaDfn, ...extensions); }; Object.defineProperties(makeYAMLSchema, { makeJSExtSchema: { enumerable: true, writable: false, configurable: false }, tagPrefix: { enumerable: true, writable: true, configurable: false } }); return makeYAMLSchema; }4a:T51d,

`${makeYAMLSchema.makeJSExtSchema.name}`

Calling ${makeYAMLSchema.name}.${makeYAMLSchema.makeJSExtSchema.name} is identical to calling ${makeYAMLSchema.name}, except that extensions supplied from js-yaml-js-types are automatically included before those supplied in the function arguments.

function ${makeYAMLSchema.name}.${makeYAMLSchema.makeJSExtSchema.name}(YAML, …extensions)

4b:T563,

`Esprima`

For parsing and serializing functions, version ${Esprima.version} of Esprima is used. If you want to use a different version, just override that variable.

override

import {makeItNow as makeYAMLSchema}
with {newerEsprima as Esprima}
from "@rmw4269/js-yaml"

4c:Ta55,

`JSExtSchemaProperTypeCheck`

This variable is here to change the type checking behavior used in my port of js-yaml-js-types. I modified the default behavior to be more robust, but the string-based method is quicker and will work across realms. Override the variable to use the string-based version.

JSExtSchemaProperTypeCheck = true

o => o instanceof RegExp

JSExtSchemaProperTypeCheck = false

o => Object.prototype.toString.call(o) === "[object RegExp]"

override

import {${overrideInput("makeYAMLSchema")}}
with {${overrideInput("JSExtSchemaProperTypeCheck", "desiredTypeCheck")}}
from "@rmw4269/js-yaml"

4d:T408,makeImport = { let keyword = name => { let e = document.createElement("span"); e.classList.add("tok-keyword"); e.textContent = name; }; let brace = Object.create(null, { open: { get: function openBrace() { let b = document.createElement("span"); b.classList.add("tok-punctuation"); b.textContent = "{"; return b; }, enumerable: true }, close: { get: function closeBrace() { let b = document.createElement("span"); b.classList.add("tok-punctuation"); b.textContent = "}"; return b; }, enumerable: true } }); return function makeImport({ cell = "cell", overrides, link = "@rmw4269/js-yaml" } = {}) { let wrap = document.createElement("code"); wrap.classList.add("observablehq--md-pre"); wrap.spellcheck = false; wrap.setAttribute("autocorrect", "off"); wrap.autocapitalize = "off"; wrap.translate = false; wrap.textContent = link; return wrap; }; }4e:T95b,overrideInput = { let asFrag; { asFrag = document.createDocumentFragment(); let asSpan = document.createElement("span"); asSpan.textContent = "as"; asSpan.classList.add("tok-keyword"); asFrag.append(" ", asSpan, " "); } let makeName = name => { let wrap = document.createElement("span"); wrap.classList.add("tok-variableName", "tok-definition"); let anchor = document.createElement("a"); anchor.style.color = "unset"; if (name = name.trim()) { anchor.setAttribute("href", `#${name}`); anchor.textContent = name; } wrap.append(anchor); return wrap; }; let f = function overrideInput(variable, suggestion) { /* JSExtSchemaProperTypeCheck as JSExtSchemaProperTypeCheck */ variable = variable.trim(); (typeof suggestion == "string" || (typeof suggestion == "object" && suggestion instanceof String)) && (suggestion = suggestion.trim()); suggestion ||= undefined; let wrap = document.createDocumentFragment(); if (suggestion) { let newHolder = document.createElement("span"); newHolder.classList.add("tok-variableName", "variableNameInput"); newHolder.inputMode = "text"; newHolder.contentEditable = true; newHolder.textContent = suggestion; wrap.append(newHolder, asFrag.cloneNode(Infinity), makeName(variable)); } else { let holder = document.createElement("span"); holder.classList.add("tok-variableName", "tok-definition"); holder.inputMode = "text"; holder.contentEditable = true; holder.textContent = variable; wrap.append(holder); holder.addEventListener("input", () => { let newHolder = holder; holder = makeName(variable); newHolder.classList.remove("tok-definition"); newHolder.classList.add("variableNameInput"); newHolder.parentNode.insertBefore(holder, newHolder.nextSibling); holder.parentNode.insertBefore(asFrag.cloneNode(Infinity), holder); // newHolder.after(asFrag.cloneNode(Infinity), holder); }, {once: true, passive: true}); } return wrap; }; return f; }4f:T800,50:[] 44:{"id":"ec6c659e817233a5","slug":"js-yaml","title":"YAML library with JS extensions","thumbnail":"512125238bc03f34a3950ac3cb4edc4f520cef4d296be08a8e41cb01d2bd374a","access_level":"public","create_time":"$D2022-07-28T17:01:15.436Z","update_time":"$D2022-11-03T16:44:37.848Z","view_time":null,"first_public_time":"$D2022-07-29T01:51:09.183Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d2b7afa3a61febdf","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":"starter_2024","bio":"I enjoy spreadsheets and JavaScript way too much.","following":false},"version":647,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"bio":"I enjoy spreadsheets and JavaScript way too much.\n\ntrust://Riley.science!","following":false}],"members":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"YAML library with JS extensions","cells":[{"id":0,"value":"

YAML library with JS extensions

\nThis uses an extended YAML schema to better serialize and parse JavaScript objects. I did not write this from scratch; much of this code is copied from the package [`js-yaml-js-types`](//GitHub.com/nodeca/js-yaml-js-types), with minor edits for efficiency and best practices. This is just a workaround to handle type inheritance issues caused by loading this in the browser.\n\npackages by [Nodeca](//GitHub.com/nodeca):\n* [`js-yaml`](//GitHub.com/nodeca/js-yaml) (version ${YAML_version})\n* [`js-yaml-js-types`](//GitHub.com/nodeca/js-yaml-js-types) (version 1.0.0)\n * [`function.js`](//GitHub.com/nodeca/js-yaml-js-types/blob/master/function.js)\n * [`undefined.js`](//GitHub.com/nodeca/js-yaml-js-types/blob/master/undefined.js)\n * [`regexp.js`](//GitHub.com/nodeca/js-yaml-js-types/blob/master/regexp.js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"

limitations

The library js-yaml-js-types only adds support for the undefined value, regular expressions, and functions; more types can be added with the functions in this notebook. Because of the limitations of text, functions with closures cannot be recreated from YAML.

`YAML`

To make this notebook flexible, you are expected to provide your own version of YAML. You may import the version used in this notebook (currently ${YAML_version}) if you wish, but it still has to be provided in ${makeYAMLSchema.name}.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"YAML = {\n let baseEndpoint = \"//CDN.SkyPack.dev/js-yaml@\";\n let path = \"/dist/js-yaml.mjs\";\n let version = (await (await fetch(`${baseEndpoint}${YAML_version}${path}?meta`)).json()).version;\n if (version != YAML_version) {\n mutable YAML_version = version;\n return new Promise(() => {});\n }\n return import(`${baseEndpoint}${YAML_version}${path}?min`).then(m => m.default);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$4b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"Esprima = require(\"esprima@4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"

`tagPrefix`

${makeYAMLSchema.name}.tagPrefix = \"${makeYAMLSchema.tagPrefix}\"

If that’s useful, I’m happy for you. If not, you can modify or ignore it. Changing this will not affect any of the functions.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"$4c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"JSExtSchemaProperTypeCheck = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"YAML.dump(() => 3, {schema: makeYAMLSchema.makeJSExtSchema(YAML)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"mutable YAML_version = \"4.1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"makeImport()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$4f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"cellWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"import {cellWidth} from \"@rmw4269/css-cell-width\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 45:"$44:body"