@stonecrop/stonecrop 0.2.5 → 0.2.7

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@stonecrop/stonecrop",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "schema helper",
   "license": "MIT",
   "type": "module",
+  "author": {
+    "name": "Tyler Matteson",
+    "email": "tyler@agritheory.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agritheory/stonecrop",
+    "directory": "stonecrop"
+  },
+  "bugs": {
+    "url": "https://github.com/agritheory/stonecrop/issues"
+  },
   "exports": {
     ".": {
       "import": "./dist/stonecrop.js",
@@ -12,10 +24,11 @@
   },
   "main": "dist/stonecrop.js",
   "module": "dist/stonecrop.js",
+  "umd": "dist/stonecrop.umd.cjs",
   "types": "src/index",
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/*"
   ],
   "dependencies": {
     "@vueuse/core": "^9.13.0",
@@ -24,26 +37,28 @@
     "pinia-shared-state": "^0.3.0",
     "pinia-undo": "^0.1.9",
     "pinia-xstate": "^1.0.9",
-    "vue": "^3.2.47",
+    "vue": "^3.4.23",
     "vue-router": "^4",
     "xstate": "~4.37.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "@stonecrop/aform": "0.2.5",
-    "@stonecrop/atable": "0.2.5"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9",
+    "@stonecrop/aform": "0.2.7",
+    "@stonecrop/atable": "0.2.7"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "engines": {
     "node": ">=20.11.0"
   },
-  "umd": "dist/stonecrop.umd.cjs",
   "scripts": {
     "build": "vite build",
     "dev": "vite serve stories/ -c vite.config.ts",

package/src/composable.ts

@@ -0,0 +1,49 @@
+import { inject, onBeforeMount, Ref, ref } from 'vue'
+
+import Registry from './registry'
+import { Stonecrop } from './stonecrop'
+import { useDataStore } from './stores/data'
+
+type StonecropReturn = {
+	stonecrop: Ref<Stonecrop>
+	isReady: Ref<boolean>
+}
+
+export function useStonecrop(registry?: Registry): StonecropReturn {
+	if (!registry) {
+		registry = inject<Registry>('$registry')
+	}
+
+	const store = useDataStore()
+	const stonecrop = ref(new Stonecrop(registry, store))
+	const isReady = ref(false)
+
+	onBeforeMount(async () => {
+		const route = registry.router.currentRoute.value
+		const doctypeSlug = route.params.records?.toString().toLowerCase()
+		const recordId = route.params.record?.toString().toLowerCase()
+
+		// TODO: handle views other than list and form views?
+		if (!doctypeSlug && !recordId) {
+			return
+		}
+
+		// setup doctype via registry
+		const doctype = await registry.getMeta(doctypeSlug)
+		registry.addDoctype(doctype)
+		stonecrop.value.setup(doctype)
+
+		if (doctypeSlug) {
+			if (recordId) {
+				await stonecrop.value.getRecord(doctype, recordId)
+			} else {
+				await stonecrop.value.getRecords(doctype)
+			}
+		}
+
+		stonecrop.value.runAction(doctype, 'LOAD', recordId ? [recordId] : undefined)
+		isReady.value = true
+	})
+
+	return { stonecrop, isReady }
+}

package/src/doctype.ts

@@ -0,0 +1,39 @@
+import { Component } from 'vue'
+
+import type { ImmutableDoctype } from 'types/index'
+
+export default class DoctypeMeta {
+	readonly doctype: string
+	readonly schema: ImmutableDoctype['schema']
+	readonly workflow: ImmutableDoctype['workflow']
+	readonly actions: ImmutableDoctype['actions']
+	// TODO: allow different components for different views; probably
+	// should be defined in the schema instead?
+	readonly component?: Component
+
+	constructor(
+		doctype: string,
+		schema: ImmutableDoctype['schema'],
+		workflow: ImmutableDoctype['workflow'],
+		actions: ImmutableDoctype['actions'],
+		component?: Component
+	) {
+		this.doctype = doctype
+		this.schema = schema
+		this.workflow = workflow
+		this.actions = actions
+		this.component = component
+	}
+
+	get slug() {
+		// kebab case
+		return this.doctype
+			.replace(/([a-z])([A-Z])/g, '$1-$2')
+			.replace(/[\s_]+/g, '-')
+			.toLowerCase()
+	}
+
+	get __typename() {
+		return this.doctype
+	}
+}

package/src/exceptions.ts

@@ -0,0 +1,13 @@
+export function NotImplementedError(message: string) {
+	this.message = message || ''
+}
+
+NotImplementedError.prototype = Object.create(Error.prototype, {
+	constructor: { value: NotImplementedError },
+	name: { value: 'NotImplemented' },
+	stack: {
+		get: function () {
+			return new Error().stack
+		},
+	},
+})

package/src/index.ts

@@ -0,0 +1,6 @@
+import { useStonecrop } from './composable'
+import DoctypeMeta from './doctype'
+import Registry from './registry'
+import Stonecrop from './plugins'
+
+export { DoctypeMeta, Registry, Stonecrop, useStonecrop }

package/src/plugins/index.ts

@@ -0,0 +1,23 @@
+import { App } from 'vue'
+
+import type { InstallOptions } from 'types/index'
+import Registry from '../registry'
+import router from '../router'
+import { pinia } from '../stores'
+
+export default {
+	install: (app: App, options?: InstallOptions) => {
+		const appRouter = options?.router || router
+		const registry = new Registry(appRouter, options?.getMeta)
+
+		app.use(appRouter)
+		app.use(pinia)
+		app.provide('$registry', registry)
+
+		if (options?.components) {
+			for (const [tag, component] of Object.entries(options.components)) {
+				app.component(tag, component)
+			}
+		}
+	},
+}

package/src/registry.ts

@@ -0,0 +1,35 @@
+import { Router } from 'vue-router'
+
+import DoctypeMeta from '@/doctype'
+
+export default class Registry {
+	static _root: Registry
+	name: string
+	router: Router
+	registry: Record<string, DoctypeMeta>
+	getMeta?: (doctype: string) => DoctypeMeta | Promise<DoctypeMeta>
+
+	constructor(router: Router, getMeta?: (doctype: string) => DoctypeMeta | Promise<DoctypeMeta>) {
+		if (Registry._root) {
+			return Registry._root
+		}
+		Registry._root = this
+		this.name = 'Registry'
+		this.router = router
+		this.registry = {}
+		this.getMeta = getMeta
+	}
+
+	addDoctype(doctype: DoctypeMeta) {
+		if (!(doctype.doctype in Object.keys(this.registry))) {
+			this.registry[doctype.slug] = doctype
+		}
+		if (!this.router.hasRoute(doctype.doctype)) {
+			this.router.addRoute({
+				path: `/${doctype.slug}`,
+				name: doctype.slug,
+				component: doctype.component,
+			})
+		}
+	}
+}

package/src/router.ts

@@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes: [],
+})
+
+export default router

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { ComponentOptions } from 'vue'
+	const Component: ComponentOptions
+	export default Component
+}

package/src/stonecrop.ts

@@ -0,0 +1,243 @@
+import type { ImmutableDoctype, Schema } from 'types/index'
+import DoctypeMeta from './doctype'
+import { NotImplementedError } from './exceptions'
+import Registry from './registry'
+import { useDataStore } from './stores/data'
+
+export class Stonecrop {
+	/**
+	 * @property {Stonecrop} _root
+	 * @description The root Stonecrop instance
+	 */
+	static _root: Stonecrop
+
+	/**
+	 * @property {string} name
+	 * @description The name of the Stonecrop instance
+	 * @example
+	 * 'Stonecrop'
+	 */
+	readonly name = 'Stonecrop'
+
+	/**
+	 * @property {Registry} registry
+	 * @description The registry is an immutable collection of doctypes
+	 * @example
+	 * {
+	 * 	'task': {
+	 * 		doctype: 'Task',
+	 * 		schema: {
+	 * 			title: 'string',
+	 * 			description: 'string',
+	 * 			...
+	 * 		}
+	 * 	},
+	 * 	...
+	 * }
+	 * @see {@link Registry}
+	 * @see {@link DoctypeMeta}
+	 */
+	readonly registry: Registry
+
+	/**
+	 * @property {Schema} schema - The Stonecrop schema
+	 * @description The schema is a subset of the registry
+	 * @example
+	 * {
+	 * 	doctype: 'Task',
+	 * 	schema: {
+	 * 		title: 'string',
+	 * 		description: 'string',
+	 * 		...
+	 * 	}
+	 * }
+	 * @see {@link Registry}
+	 * @see {@link DoctypeMeta}
+	 * @see {@link DoctypeMeta.schema}
+	 */
+	schema: Schema
+
+	/**
+	 * @property {ImmutableDoctype['workflow']} workflow
+	 * @description The workflow is a subset of the registry
+	 */
+	workflow: ImmutableDoctype['workflow']
+
+	/**
+	 * @property {ImmutableDoctype['actions']} actions
+	 * @description The actions are a subset of the registry
+	 */
+	actions: ImmutableDoctype['actions']
+
+	/**
+	 * @property {ReturnType<typeof useDataStore>} store
+	 * @description The Pinia store that manages the mutable records
+	 */
+	store: ReturnType<typeof useDataStore>
+
+	/**
+	 * @constructor
+	 * @param {Registry} registry - The immutable registry
+	 * @param {ReturnType<typeof useDataStore>} store - The mutable Pinia store
+	 * @param {Schema} [schema] - (optional) The Stonecrop schema
+	 * @param {ImmutableDoctype['workflow']} [workflow] - (optional) The Stonecrop workflow
+	 * @param {ImmutableDoctype['actions']} [actions] - (optional) The Stonecrop actions
+	 * @returns {Stonecrop} The Stonecrop instance
+	 * @description The Stonecrop constructor initializes a new Stonecrop instance with the given registry, store, schema, workflow, and actions. If a Stonecrop instance has already been created, it returns the existing instance instead of creating a new one.
+	 * @example
+	 * const registry = new Registry()
+	 * const store = useDataStore()
+	 * const stonecrop = new Stonecrop(registry, store, schema, workflow, actions)
+	 */
+	constructor(
+		registry: Registry,
+		store: ReturnType<typeof useDataStore>,
+		schema?: Schema,
+		workflow?: ImmutableDoctype['workflow'],
+		actions?: ImmutableDoctype['actions']
+	) {
+		if (Stonecrop._root) {
+			return Stonecrop._root
+		}
+		Stonecrop._root = this
+		this.registry = registry
+		this.store = store
+		this.schema = schema // new Registry(schema)
+		this.workflow = workflow
+		this.actions = actions
+	}
+
+	/**
+	 * @method setup
+	 * @param {DoctypeMeta} doctype - The doctype to setup
+	 * @returns {void}
+	 * @description Sets up the Stonecrop instance with the given doctype
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.setup(doctype)
+	 */
+	setup(doctype: DoctypeMeta): void {
+		this.getMeta(doctype)
+		this.getWorkflow(doctype)
+		this.getActions(doctype)
+	}
+
+	/**
+	 * @method getMeta
+	 * @param {DoctypeMeta} doctype - The doctype to get meta for
+	 * @returns {DoctypeMeta}
+	 * @see {@link DoctypeMeta}
+	 * @throws NotImplementedError
+	 * @description Gets the meta for the given doctype
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * const meta = stonecrop.getMeta(doctype)
+	 */
+	getMeta(doctype: DoctypeMeta): DoctypeMeta | Promise<DoctypeMeta> | never {
+		return this.registry.getMeta ? this.registry.getMeta(doctype.doctype) : new NotImplementedError(doctype.doctype)
+	}
+
+	/**
+	 * @method getWorkflow
+	 * @param {DoctypeMeta} doctype - The doctype to get workflow for
+	 * @returns {void}
+	 * @description Gets the workflow for the given doctype
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.getWorkflow(doctype)
+	 */
+	getWorkflow(doctype: DoctypeMeta): void {
+		const doctypeRegistry = this.registry.registry[doctype.slug]
+		this.workflow = doctypeRegistry.workflow
+	}
+
+	/**
+	 * @method getActions
+	 * @param {DoctypeMeta} doctype - The doctype to get actions for
+	 * @returns {void}
+	 * @description Gets the actions for the given doctype
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.getActions(doctype)
+	 */
+	getActions(doctype: DoctypeMeta): void {
+		const doctypeRegistry = this.registry.registry[doctype.slug]
+		this.actions = doctypeRegistry.actions
+	}
+
+	/**
+	 * @method getRecords
+	 * @param {DoctypeMeta} doctype - The doctype to get records for
+	 * @param {RequestInit} [filters] - The filters to apply to the records
+	 * @returns {Promise<void>}
+	 * @description Gets the records for the given doctype
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * await stonecrop.getRecords(doctype)
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * const filters = JSON.stringify({ status: 'Open' })
+	 * await stonecrop.getRecords(doctype, { body: filters })
+	 */
+	async getRecords(doctype: DoctypeMeta, filters?: RequestInit): Promise<void> {
+		this.store.$patch({ records: [] })
+		const records = await fetch(`/${doctype.slug}`, filters)
+		const data: Record<string, any>[] = await records.json()
+		this.store.$patch({ records: data })
+	}
+
+	/**
+	 * @method getRecord
+	 * @param {DoctypeMeta} doctype - The doctype to get record for
+	 * @param {string} id - The id of the record to get
+	 * @returns {Promise<void>}
+	 * @description Gets the record for the given doctype and id
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * await stonecrop.getRecord(doctype, 'TASK-00001')
+	 */
+	async getRecord(doctype: DoctypeMeta, id: string): Promise<void> {
+		this.store.$patch({ record: {} })
+		const record = await fetch(`/${doctype.slug}/${id}`)
+		const data: Record<string, any> = await record.json()
+		this.store.$patch({ record: data })
+	}
+
+	/**
+	 * @method runAction
+	 * @param {DoctypeMeta} doctype - The doctype to run action for
+	 * @param {string} action - The action to run
+	 * @param {string[]} [id] - The id(s) of the record(s) to run action on
+	 * @returns {void}
+	 * @description Runs the action for the given doctype and id
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.runAction(doctype, 'CREATE')
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.runAction(doctype, 'UPDATE', ['TASK-00001'])
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.runAction(doctype, 'DELETE', ['TASK-00001'])
+	 * @example
+	 * const doctype = await registry.getMeta('Task')
+	 * stonecrop.runAction(doctype, 'TRANSITION', ['TASK-00001', 'TASK-00002'])
+	 */
+	runAction(doctype: DoctypeMeta, action: string, id?: string[]): void {
+		const doctypeRegistry = this.registry.registry[doctype.slug]
+		const actions = doctypeRegistry.actions.get(action)
+
+		// trigger the action on the state machine
+		const { initialState } = this.workflow
+		this.workflow.transition(initialState, { type: action })
+
+		// run actions after state machine transition
+		if (actions.length > 0) {
+			actions.forEach(action => {
+				// eslint-disable-next-line @typescript-eslint/no-implied-eval
+				const actionFn = new Function(action)
+				actionFn(id)
+			})
+		}
+	}
+}

package/src/stores/data.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useDataStore = defineStore('data', () => {
+	const records = ref<Record<string, any>[]>([])
+	const record = ref<Record<string, any>>({})
+	return { records, record }
+})

package/src/stores/index.ts

@@ -0,0 +1,16 @@
+import { createPinia } from 'pinia'
+import { PiniaSharedState } from 'pinia-shared-state'
+import { PiniaUndo } from 'pinia-undo'
+
+const pinia = createPinia()
+
+// Pass the plugin to your application's pinia plugin
+pinia.use(
+	PiniaSharedState({
+		enable: true,
+		initialize: true,
+	})
+)
+// pinia.use(PiniaUndo)
+
+export { pinia }

package/src/stores/xstate.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import xstate from 'pinia-xstate'
+import { createMachine } from 'xstate'
+
+export const counterMachine = createMachine(
+	{
+		id: 'counter',
+		initial: 'active',
+		context: {
+			count: 0,
+		},
+		tsTypes: {} as import('./xstate.typegen').Typegen0,
+		states: {
+			active: {
+				on: {
+					INC: { actions: 'increment' },
+					DEC: { actions: 'decrement' },
+				},
+			},
+		},
+	},
+	{
+		actions: {
+			increment: context => {
+				context.count = context.count + 1
+			},
+			decrement: context => {
+				context.count = context.count - 1
+			},
+		},
+	}
+)
+
+// create a store using the xstate middleware
+export const useCounterStore = defineStore(counterMachine.id, xstate(counterMachine))