Extend the etched types

complex-etched-type-demo.md

How to run this script?

Into a terminal: npx https://gist.github.com/Lcfvs/4b1523653bfe54605b82113170299f61

entities.js

import { model } from '@etchedjs/etched'
import entity from './entity.js'
import userType from './user.js'

export const user = model(entity, userType)

entity.js

import { model } from '@etchedjs/etched'
import type, * as types from './type.js'

export const id = model(types.max, types.min, types.step, {
  max: Number.MAX_SAFE_INTEGER,
  min: 1,
  step: 1
})

export default model(
  type('id', id, () => new TypeError('Must be a valid id'))
)

npx.js

#!/usr/bin/env node
import { execSync } from 'child_process'

await import('./test.js')

execSync('npm r .')

package.json

{
  "name": "complex-etched-type-demo",
  "version": "1.0.2",
  "type": "module",
  "main": "test.js",
  "bin": "npx.js",
  "scripts": {
    "test": "node test.js"
  },
  "author": "@etchedjs",
  "license": "MIT",
  "dependencies": {
    "@etchedjs/etched": "^9.0.2",
    "@etchedjs/type": "^3.0.6",
    "@lcf.vs/dom-engine": "^2.3.4"
  }
}

test.js

import { etches, fulfill, model } from '@etchedjs/etched'
import { serialize, template } from '@lcf.vs/dom-engine/lib/backend.js'
import * as entity from './entity.js'
import * as entities from './entities.js'
import user from './user.js'

const attempt = fn => {
  try {
    console.log(fn())
  } catch (error) {
    if (error.errors) {
      console.error(Object.fromEntries(error.errors))
    } else {
      console.error(error)
    }
  }
}

const id = 1

const name = 'Lcf.vs'

const input = template(`<input
  max="{?max}"
  min="{?min}"
  name="{name}"
  step="{?step}"
  type="number"
  value="{?value}"
/>`)

attempt(() => fulfill(user, { name }))
/*
{
  name: 'Lcf.vs'
}
*/

attempt(() => fulfill(entities.user, { id, name }))
/*
{
  id: 1,
  name: 'Lcf.vs'
}
*/

attempt(() => fulfill(entities.user, { name }))
/*
{
  id: 'TypeError: Must be a valid id'
}
*/

attempt(() => fulfill(entities.user, { id, name: '' }))
/*
{
  name: 'TypeError: Must match the pattern /^[\w\d-.]{3,15}$/'
}
*/

attempt(() => etches(user, entities.user))
/*
true
*/

attempt(() => etches(user, fulfill(entities.user, { id, name })))
/*
true
*/

attempt(() => entity.id)
/*
{
  max: 9007199254740991,
  min: 1,
  step: 1
}
*/

attempt(() => fulfill(entity.id, { value: id }))
/*
{
  value: 123,
  max: 9007199254740991,
  min: 1,
  step: 1
}
*/

attempt(() => {
  const name = 'id'
  const template = model(input, entity.id, { name })

  return serialize(template)
})
/*
<input xmlns="http://www.w3.org/1999/xhtml" max="9007199254740991" min="1" name="id" step="1" type="number" />
*/

attempt(() => {
  const name = 'id'
  const template = model(input, entity.id, { name })

  return serialize(fulfill(template, { value: id }))
})
/*
<input xmlns="http://www.w3.org/1999/xhtml" max="9007199254740991" min="1" name="id" step="1" type="number" value="1" />
*/

type.js

import { model } from '@etchedjs/etched'
import type, * as types from '@etchedjs/type'
export * from '@etchedjs/type'
export default type

export const match = model(
  types.string,
  type('pattern', types.instance(RegExp), e => e()),
  {
    set value (value) {
      const { pattern } = this

      if (!value.match(pattern)) {
        throw new TypeError(`Must match the pattern ${pattern}`)
      }
    }
  })

export const max = model(
  types.number,
  type('max', types.number, e => e()),
  {
    set value (value) {
      const { max } = this

      if (value > max) {
        throw new TypeError(`Must be lower or equal to ${max}`)
      }
    }
  })

export const min = model(
  types.number,
  type('min', types.number, e => e()),
  {
    set value (value) {
      const { min } = this

      if (value < min) {
        throw new TypeError(`Must be greater or equal to ${min}`)
      }
    }
  })


export const step = model(
  types.number,
  type('step', types.number, e => e()),
  {
    set value (value) {
      const { step } = this

      if (value % step !== 0) {
        throw new TypeError(`Must be a multiple of ${step}`)
      }
    }
  })

user.js

import { model } from '@etchedjs/etched'
import type, * as types from './type.js'

export const name = model(types.match, {
  pattern: /^[\w\d-.]{3,15}$/
})

export default model(
  type('name', name, e => e())
)