From 3382e65ce6ef18d53fd969793aaea95f664b7a6d Mon Sep 17 00:00:00 2001 From: Chris Blanquera Date: Tue, 20 Aug 2024 11:36:24 +0800 Subject: [PATCH] adding classnames function --- packages/temple/LICENSE | 2 +- packages/temple/src/client.ts | 2 ++ packages/temple/src/client/classnames.ts | 10 +++++++ packages/temple/src/client/props.ts | 2 +- packages/temple/src/compiler.ts | 4 +++ packages/temple/src/component/Component.ts | 28 ++++++++++++++++---- packages/temple/src/server.ts | 2 ++ packages/temple/src/server/TempleDocument.ts | 8 +++--- packages/temple/src/server/classnames.ts | 9 +++++++ 9 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 packages/temple/src/client/classnames.ts create mode 100644 packages/temple/src/server/classnames.ts diff --git a/packages/temple/LICENSE b/packages/temple/LICENSE index 261eeb9..d1626f9 100644 --- a/packages/temple/LICENSE +++ b/packages/temple/LICENSE @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright [yyyy] [name of copyright owner] + Copyright 2025 Chris Blanquera Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/packages/temple/src/client.ts b/packages/temple/src/client.ts index c516ca1..bc260c4 100644 --- a/packages/temple/src/client.ts +++ b/packages/temple/src/client.ts @@ -7,6 +7,7 @@ import emitter, { TempleEmitter } from './client/TempleEmitter'; import TempleException from './client/TempleException'; import data from './client/data'; import props from './client/props'; +import classnames from './client/classnames'; import children, { innerHTML } from './client/children'; import signal, { SignalRegistry } from './client/signal'; import './client/helpers'; @@ -14,6 +15,7 @@ import './client/helpers'; export { data, props, + classnames, children, innerHTML, signal, diff --git a/packages/temple/src/client/classnames.ts b/packages/temple/src/client/classnames.ts new file mode 100644 index 0000000..c6222bc --- /dev/null +++ b/packages/temple/src/client/classnames.ts @@ -0,0 +1,10 @@ +import type TempleComponent from './TempleComponent'; +import props from './props'; + +/** + * Get the current classnames where this is being called from + * ie. const classes = classnames(); + */ +export default function classnames(component: TempleComponent|null = null) { + return props<{'class': string}>(component)['class']; +} \ No newline at end of file diff --git a/packages/temple/src/client/props.ts b/packages/temple/src/client/props.ts index 8a752ee..e9f9a14 100644 --- a/packages/temple/src/client/props.ts +++ b/packages/temple/src/client/props.ts @@ -18,5 +18,5 @@ export default function props< if (component) { return component.props as T; } - return {}; + return {} as T; } \ No newline at end of file diff --git a/packages/temple/src/compiler.ts b/packages/temple/src/compiler.ts index 762622f..9e495f9 100644 --- a/packages/temple/src/compiler.ts +++ b/packages/temple/src/compiler.ts @@ -35,6 +35,8 @@ import definitions, { import { camelize, capitalize, + decrypt, + encrypt, lowerlize, slugify, serialize, @@ -77,6 +79,8 @@ export { identifier, camelize, capitalize, + decrypt, + encrypt, lowerlize, slugify, serialize, diff --git a/packages/temple/src/component/Component.ts b/packages/temple/src/component/Component.ts index 20f9aae..41f4ea4 100644 --- a/packages/temple/src/component/Component.ts +++ b/packages/temple/src/component/Component.ts @@ -82,24 +82,42 @@ export default class Component { this._components = this.ast.components.map(component => { //get property attributes const properties = component.attributes.properties; - //find type property - const property = properties.find( + //find type property + // ie. + // ie. + const typeProperty = properties.find( property => property.key.name === 'type' ); //determine the type of component const type = ( //if property is found - property + typeProperty //and the value type is a literal - && property.value.type === 'Literal' + && typeProperty.value.type === 'Literal' //and the value is 'template' - && property.value.value === 'template' + && typeProperty.value.value === 'template' ) ? 'template' : 'component'; + + //find name property + // ie. + const nameProperty = properties.find( + property => property.key.name === 'name' + ); + //determine the type of component + const name = ( + //if property is found + nameProperty + //and the value type is a literal + && nameProperty.value.type === 'Literal' + //and type of value is string + && typeof nameProperty.value.value === 'string' + ) ? nameProperty.value.value : undefined; return new Component(component.source.value, { cwd: this._cwd, fs: this._fs, seed: this._seed, + name: name, type: type }); }); diff --git a/packages/temple/src/server.ts b/packages/temple/src/server.ts index ec87f2c..f48ac91 100644 --- a/packages/temple/src/server.ts +++ b/packages/temple/src/server.ts @@ -7,6 +7,7 @@ import TempleText from './server/TempleText'; import TempleServerException from './server/TempleException'; import data from './server/data'; import props from './server/props'; +import classnames from './server/classnames'; import signal from './server/signal'; export type * from './types'; @@ -15,6 +16,7 @@ export { data, emitter, props, + classnames, signal, TempleCollection, TempleDocument, diff --git a/packages/temple/src/server/TempleDocument.ts b/packages/temple/src/server/TempleDocument.ts index 2477a0c..f5a920f 100644 --- a/packages/temple/src/server/TempleDocument.ts +++ b/packages/temple/src/server/TempleDocument.ts @@ -33,7 +33,7 @@ export default abstract class TempleDocument { * Returns the rendered document with build files */ public build(path: string, props: Record = {}) { - let document = this.render(props); + let document = this.markup(props); const id = this.id(); const styles = this.styles().trim(); const inject = [ @@ -50,8 +50,8 @@ export default abstract class TempleDocument { /** * Returns the rendered document with inline code */ - public inline(props: Record = {}) { - const document = this.render(props); + public render(props: Record = {}) { + const document = this.markup(props); const styles = this.styles().trim(); const inject = [ ``, @@ -76,7 +76,7 @@ export default abstract class TempleDocument { /** * Renders the redered document without injections */ - public render(props: Record = {}) { + public markup(props: Record = {}) { //set props (this is so template() can read it) data.set('props', props || {}); //set the current component (this is so template() can read it) diff --git a/packages/temple/src/server/classnames.ts b/packages/temple/src/server/classnames.ts new file mode 100644 index 0000000..76b47e2 --- /dev/null +++ b/packages/temple/src/server/classnames.ts @@ -0,0 +1,9 @@ +import props from './props'; + +/** + * Get the current classnames where this is being called from + * ie. const classes = classnames(); + */ +export default function classnames() { + return props<{'class': string}>()['class']; +} \ No newline at end of file