adding classnames function

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.

packages/temple/src/client.ts

@@ -7,13 +7,15 @@ 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';
 
 export {
   data,
   props,
+  classnames,
   children,
   innerHTML,
   signal, 

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'];
+}

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;
 }

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,

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. <link type="component" />
+        // ie. <link type="template" />
+        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. <link name="foo-bar" />
+        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
         });
       });

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,

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<string, any> = {}) {
-    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<string, any> = {}) {
-    const document = this.render(props);
+  public render(props: Record<string, any> = {}) {
+    const document = this.markup(props);
     const styles = this.styles().trim();
     const inject = [
       `<script class="temple-build">${this.props()}</script>`,
@@ -76,7 +76,7 @@ export default abstract class TempleDocument {
   /**
    * Renders the redered document without injections
    */
-  public render(props: Record<string, any> = {}) {
+  public markup(props: Record<string, any> = {}) {
     //set props (this is so template() can read it)
     data.set('props', props || {});
     //set the current component (this is so template() can read it)

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'];
+}