30:T4cf,async function* runWorker(source) { let self; const script = `(async()=>{ const SVGO = await import("https://cdn.jsdelivr.net/npm/svgo@4/dist/svgo.browser.min.js"); ${toConfig} ${multipass} ${optimize} (${run})() })() `; let promise, resolve; const url = URL.createObjectURL(new Blob([script], {type: "text/javascript"})); const worker = new Worker(url); const terminate = () => { URL.revokeObjectURL(url); worker.terminate(); }; invalidation.then(terminate); worker.onmessage = e => { const {type, data} = e.data; if(type === "ready") worker.postMessage({type: "data", data: source}); else resolve(data); }; while(true) { const {value, done} = await new Promise(_ => {resolve = _}); if(done) return terminate(), value; yield value; } function run() { self.addEventListener("message", async e => { const {type, data: source} = e.data; if(type !== "data") return; const gen = multipass(source, optimize); while(true) { const {done, value} = await gen.next(); self.postMessage({type: "data", data: {value, done}}); if(done) return; } }, {once: true}); self.postMessage({type: "ready"}); } }31:Tecb,class FormBuilder { _labelFromDescription; constructor({labelFromDescription = false} = {}) { this._labelFromDescription = labelFromDescription; } _mapSchema(schema) { const {title, description} = schema; } assertProps(schema, required, optional = []) { try { const allowed = new Set([...required, ...optional]); for(const k of required) if(schema[k] == null) throw new Error(`Missing required property "${k}"`); for(const k of Object.keys(schema)) { if(!allowed.has(k)) throw new Error(`Unexpected property "${k}"`); } } catch(error) { console.warn(error); } return schema; } getLabel(schema) { return (this._labelFromDescription ? schema.description : "") || schema.title; } getDescription(schema) { return this._labelFromDescription && schema.description ? schema.title : undefined; } render(schema) { if(schema.enum) return this.renderEnum(schema); switch(schema.type) { case "object": return this.renderObject(schema); case "number": return this.renderNumber(schema); case "integer": return this.renderInteger(schema); case "boolean": return this.renderBoolean(schema); case "string": return this.renderString(schema); //case "array": return this.renderArray(schema); } return this.renderUnknown(schema) } renderObject(schema) { const s = this.assertProps(schema, ["type", "properties"], ["title", "description"]); const label = this.getLabel(s); const desc = this.getDescription(s); const toForm = ([key, schema]) => [key, this.render({title: key, ...schema}, key)]; const entries = Object.entries(s.properties).map(toForm); const form = Inputs.form(Object.fromEntries(entries)); return label ? this._withDescription(inputTemplate(form, {label}), desc) : form; } // renderArray(schema) { // const s = this.assertProps(schema, ["type", "items"], ["title", "description", "default"]); // } renderEnum(schema) { const s = this.assertProps(schema, ["enum"], ["default", "title", "description"]); const form = Inputs.radio(s.enum, {label: this.getLabel(s), value: s.default}); return this._withDescription(form, this.getDescription(schema)); } renderNumber(schema) { const s = this.assertProps(schema, ["type"], ["default", "title", "description", "minimum", "maximum", "exclusiveMinimum", "exclusiveMaximum", "multipleOf"]); const form = Inputs.number([ s.minimum ?? (s.exclusiveMinimum ? s.exclusiveMinimum + Number.EPSILON : -Infinity), s.maximum ?? (s.exclusiveMaximum ? s.exclusiveMaximum + Number.EPSILON : Infinity) ], {step: s.multipleOf, label: this.getLabel(s), value: s.default}); return this._withDescription(form, this.getDescription(s)); } renderInteger(s) { return this.renderNumber({...s, multipleOf: 1}); } renderBoolean(schema) { const s = this.assertProps(schema, ["type"], ["default", "title", "description"]); const form = Inputs.toggle({label: this.getLabel(s), value: s.default}); return this._withDescription(form, this.getDescription(s)); } renderString(schema) { const s = this.assertProps(schema, ["type"], ["default", "title", "description", "pattern"]); const form = Inputs.text({label: this.getLabel(s), value: s.default, pattern: s.pattern}); return this._withDescription(form, this.getDescription(s)); } renderUnknown(schema) { return htl.html`

Unsupported type: ${schema.type}`; } _withDescription(form, description) { if(!description) return form; const el = form.querySelector("& > label"); if(el) el.title = description; return form; } }32:T5f3,{ const scope = DOM.uid().id; const inputsScope = Inputs.text().classList[0]; const css = ` .${scope} { -columns: 3 } .${scope} > div { break-inside: avoid-column } .${scope} .${inputsScope}-toggle label { order: 2 } .${scope} form { width: auto !important; margin-bottom: .5ch } .${scope}-params { margin-left: 1.4ch } .${scope} label { width: auto !important } .${scope} label[title] { cursor: help } .${scope} label[title]:after { content: "ⓘ"; padding-left: .5ch; cursor: help } .${scope} summary { font: 13px/1.5 var(--sans-serif); max-width: max-content; cursor: pointer } .${scope} details > div { padding-left: 1.4ch } `; const builder = new FormBuilder({labelFromDescription: displayDescription}); const details = (summary, content) => htl.html`

${summary}

${content}`; const optionsForm = (name, {description, default: enabled, params}) => Inputs.form({ name: htl.html``, enabled: builder.render({title: name, description, type: "boolean", default: enabled}), ...params && {params: details("Options", builder.render({type: "object", properties: params}))} }, { template: d => htl.html`

${d.name}${d.enabled}

${d.params}` }); return Inputs.form(Object.entries(optionsSchemas).map(([name, s]) => optionsForm(name, s)), { template: inputs => htl.html`

${inputs}` }); }33:T4155,optionsSchemas = ({ cleanupAttrs: { description: "cleanup attributes from newlines, trailing, and repeating spaces", default: true, params: { newlines: { type: "boolean", default: true }, trim: { type: "boolean", default: true }, spaces: { type: "boolean", default: true } }, }, mergeStyles: { description: "merge multiple style elements into one", default: true, }, inlineStyles: { description: "move and merge styles from \n \n ${entries.map(([k, v]) => htl.html`\n ${entries.map(([k, v]) => htl.html`\n ${entries.map(([k, v]) => htl.html`\n`)(\n await resolveEntries({\n \"Source\": svg_original,\n \"SVGO\": svg_processed\n }),\n {\n scope: DOM.uid().id\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"function toConfig(plugins) {\n return Object.entries(plugins).map(([name, params = {}]) => ({name, params}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"// Use a helper to make the configuration less verbose.\nplugins = toConfig({\n // Add all default plugins, override some options.\n \"preset-default\": {\n overrides: {\n // Disable some default plugins.\n removeViewBox: false,\n minifyStyles: false,\n }\n },\n\n // Enable builtin plugins that are disabled by default\n convertStyleToAttrs: {},\n removeDimensions: {},\n // Do not use a dynamic prefix here!\n prefixIds: {}\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"SVGO = import(\"https://cdn.jsdelivr.net/npm/svgo@4/dist/svgo.browser.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"async function* multipass(source, fn, options = {}) {\n const {maxPasses = 10} = options;\n let pass = 0, prev = source, value;\n while(true) {\n value = await fn(prev);\n if(prev === value || ++pass >= maxPasses) return value;\n yield prev = value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"async function optimize(source, plugins = []) {\n const {data, info} = await SVGO.optimize(source, {\n // We\"ll do our own multipass to not lock up the browser.\n multipass: false,\n plugins,\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"viewof svg_original = textView(await (await toFile(source.value)).text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof svg_processed = textView(await awaitDone(runWorker(svg_original)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"### Demo helpers","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"textView = source => htl.html`

${source}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"toFile = fileOrUrl => typeof fileOrUrl === \"string\"\n  ? fetch(fileOrUrl).then(d => d.blob()).then(d => new File([d], \"file.svg\"))\n  : fileOrUrl","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"function preview(svg, options = {}) {\n  const {\n    type = \"image/svg+xml\",\n    style = \"max-width:100%;max-height:400px\",\n    invalidation: invalidated = invalidation,\n    ...props\n  } = options;\n  const url = URL.createObjectURL(new Blob([svg instanceof Element ? svg.outerHTML : svg], {type}));\n  invalidated.then(() => URL.revokeObjectURL(url));\n  return htl.html`<img ${{...props, style, src: url}}>`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"function stripXmlHeader(markup) {\n  return new DOMParser().parseFromString(markup, \"image/svg+xml\").documentElement.outerHTML;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"async function resolveEntries(obj) {\n  return Promise.all(Object.entries(obj).map(async ([k, v]) => [k, await v]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"// See https://github.com/observablehq/inputs/issues/192#issuecomment-1144788114\nfunction defaultFileInput({value, ...options} = {}) {\n  const toFile = async attachment => new File(\n    [await attachment.blob()],\n    attachment.name,\n    {type: attachment.mimeType}\n  );\n\n  const setValue = async (input, value) => {\n    const files = await Promise.all(\n      (input.multiple ? Array.from(value) : [value])\n        .map(f => f instanceof FileAttachment ? toFile(f) : f)\n    );\n    const transfer = new DataTransfer();\n    for(const f of files) transfer.items.add(f);\n    input.files = transfer.files;\n    input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n  };\n\n  const input = Inputs.file(options);\n  if(value != null) setValue(input.querySelector(\"input[type='file']\"), value);\n  \n  return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"async function awaitDone(gen) {\n  let v;\n  for await(v of gen);\n  return v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"async function pipe(arg, ...callbacks) {\n  let result = await Promise.resolve(arg);\n  for(const fn of callbacks) result = await fn(result); \n  return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"function randomId(prefix = \"s-\", base = 36) {\n  return prefix + Math.round(Math.random() * 1e8).toString(base) + Date.now().toString(base);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {inspectDOM} from \"@mootari/inspect-dom\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"import {interval} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"---\n## Config parsing","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"pipe(\n  fetch(\"https://raw.githubusercontent.com/svg/svgo/v3.0.0/README.md\"),\n  res => res.text(),\n  str => {\n    const from = \"## Built-in plugins\\n\";\n    const to = \"## Other Ways to Use SVGO\\n\";\n    const table = md`${str.slice(str.indexOf(from) + from.length, str.indexOf(to))}`;\n    return table;\n  },\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"function pluginSchema({description, default: enabled, options = {}}) {\n  return {\n    description,\n    type: \"object\",\n    properties: {\n      enabled: {type: \"boolean\", default: enabled},\n      ...options && {\n        options: {\n          type: \"object\",\n          properties: options\n        },        \n      }\n    },\n    \n  };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"import {inputTemplate} from \"@mootari/input-template\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewof displayDescription = Inputs.toggle({label: \"Display description\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}
</article></body></html>

${k}`)}
${preview(v)}`)}
${inspectDOM(stripXmlHeader(v), {\n height: 400,\n async: true,\n textLength: options.includes(\"showValues\") ? null : 10})\n }`)}