diff --git a/packages/temple-ui-src/src/compiler/Stylers.ts b/packages/temple-ui-src/src/compiler/Stylers.ts index 0297d11..73ccd27 100644 --- a/packages/temple-ui-src/src/compiler/Stylers.ts +++ b/packages/temple-ui-src/src/compiler/Stylers.ts @@ -1,63 +1,29 @@ import type { - Media, + Media, + RangeToken, Styler, LiteralToken, - RangeToken, ExpressionToken } from './types'; import Stylesheet from './StyleSheet'; import StyleParser from './StyleParser'; -import { bna, media } from './helpers'; /** * Returns a literal styler */ export const literal = function(literals: LiteralToken[]) { - return (classname: string, stylesheet: Stylesheet) => { + return (classnames: string[], stylesheet: Stylesheet, cache: Set) => { + //filter out the classnames that are already defined + const todo = classnames.filter(classname => !cache.has(classname)); for (const token of literals) { //extract the responsive, selector, //and style from the definition - const { name, styles } = token; - if (name === classname) { - stylesheet.map('all', `.${name}`, styles); - //if the classname literally equals the literal name, - //then there is no need to check the other literals - //because the literal name is unique. - return; - } - //check before and after - for (const position of bna) { - const selector = `${position}-${name}`; - if (selector === classname) { - stylesheet.map('all', `.${selector}::${position}`, styles); - //if the classname literally equals the selector name, - //then there is no need to check the other media sizes - //because the selector name is unique. - return; - } - } - //check responsive - for (const size of media) { - const selector = `${size}-${name}`; - if (selector === classname) { - stylesheet.map(size as Media, `.${selector}`, styles); - //if the classname literally equals the selector name, - //then there is no need to check the other media sizes - //because the selector name is unique. - return; - } - //check before and after - for (const position of bna) { - const selector = `${size}-${position}-${name}`; - if (selector === classname) { - stylesheet.map(size as Media, `.${selector}::${position}`, styles); - //if the classname literally equals the selector name, - //then there is no need to check the other media sizes - //because the selector name is unique. - return; - } - } + const { classname, styles, media, selector } = token; + if (todo.includes(classname)) { + stylesheet.map(media, selector, styles); + //add to cache + cache.add(classname); } } }; @@ -66,98 +32,130 @@ export const literal = function(literals: LiteralToken[]) { /** * Returns a range styler */ -export const range = function(ranges: RangeToken[]) { - const literals: LiteralToken[] = []; - //loop through ranges and make literals - for (const token of ranges) { - //extract the responsive, selector, style, - //range, and step from the definition - const { name, styles, range, step } = token; - const decimals = step.toString().split('.')[1]?.length || 0; - const multiplier = Math.pow(10, decimals); - //loop through the range - for (let i = range[0]; i <= range[1]; i += step) { - //determine the display number - const number = String(Math.floor(i * multiplier)); - //determine the style value - const value = String(Math.floor(i * multiplier) / multiplier); - //add the literal to the literals array - literals.push({ - type: 'literal', - name: name.replaceAll('$', number), - styles: styles.clone().replaceAll('$', value) - }); +export const range = function(rules: RangeToken[]) { + const expression = new RegExp('^' + [ + //media + '(((xs)|(sm)|(md)|(lg)|(xl)|(xl2)|(xl3)|(xl4))\\-){0,1}', + //pseudo + '(((before)|(after))\\-){0,1}', + //names + `((${rules.map(rule => rule.name.replaceAll('-', '\\-')).join(')|(')}))`, + //direction + '(b|l|r|t|x|y){0,1}\\-', + //calc + '(((calc)|(full)|(half)|(third)|(fourth)|(fifth))\\-){0,1}', + //numbers + '((\\d+)\\-){0,1}(\\-{0,1}\\d+)', + //measurements + '(p|e|r){0,1}' + ].join('') + '$'); + return (classnames: string[], stylesheet: Stylesheet, cache: Set) => { + //filter out the classnames that are already defined + const todo = classnames.filter(classname => !cache.has(classname)); + for (const classname of todo) { + const match = classname.match(expression); + if (match) { + //extract the necessary parts from the match + const classname = match[0]; + const media = (match[2] || 'all') as Media; + const pseudo = match[12]; + const rule = rules.find(rule => rule.name === match[15]); + if (!rule) continue; + const property = rule.property; + const directions = match[16 + rules.length] === 'b' ? [ 'bottom' ] + : match[16 + rules.length] === 'l' ? [ 'left' ] + : match[16 + rules.length] === 'r' ? [ 'right' ] + : match[16 + rules.length] === 't' ? [ 'top' ] + : match[16 + rules.length] === 'x' ? [ 'left', 'right' ] + : match[16 + rules.length] === 'y' ? [ 'top', 'bottom' ] + : []; + const calc = match[18 + rules.length]; + const value1 = match[26 + rules.length]; + const value2 = parseFloat(match[27 + rules.length] || 'NaN'); + if (isNaN(value2)) continue; + const measurement = match[28 + rules.length] === 'p' ? '%' + : match[28 + rules.length] === 'e' ? 'em' + : match[28 + rules.length] === 'r' ? 'rem' + : rule.measurable ? 'px' : ''; + //validate directional, calculable, negatable, measurable + if ((!rule.directional && directions.length) + || (!rule.calculable && calc) + || (!rule.negatable && value2 < 0) + ) continue; + //format the number value + const number = ['em', 'rem'].includes(measurement) + ? value2 * 0.01 : value2; + //determine selector + const selector = pseudo + ? `.${classname}::${pseudo}` + : `.${classname}`; + //map out all the possible properties + const properties = directions.length + ? directions.map(direction => { + if (property === 'border-width') { + return `border-${direction}-width`; + } + return `${property}-${direction}`; + }) + : [ property ]; + //determine the value + const value = calc === 'full' + ? `calc(100% - ${number}${measurement})` + : calc === 'half' + ? `calc(50% - ${number}${measurement})` + : calc === 'third' + ? `calc(33.333333% - ${number}${measurement})` + : calc === 'fourth' + ? `calc(25% - ${number}${measurement})` + : calc === 'fifth' + ? `calc(20% - ${number}${measurement})` + : calc === 'calc' + ? `calc(${value1}% - ${number}${measurement})` + : `${number}${measurement}`; + //add styles to the stylesheet + properties.forEach( + property => stylesheet.add(media, selector, property, value) + ); + //add to cache + cache.add(classname); + } } } - //return whatever literal returns - return literal(literals); }; /** * Returns an expression styler */ export const expression = function(expressions: ExpressionToken[]) { - return (classname: string, stylesheet: Stylesheet) => { - for (const token of expressions) { - //extract the responsive, selector, - //and style from the definition - const { name } = token; - const matches = classname.match(new RegExp(`^${name}$`)); - if (matches) { - //extract the selector and arguments - const [ classname, ...args ] = Array.from(matches); - //replace the arguments in the style - const styles = token.styles.clone(); - args.forEach( - (arg, index) => styles.replaceAll('$' + (index + 1), arg) - ); - //add the styles to the stylesheet - stylesheet.map('all', `.${classname}`, styles); - //if the expression is responsive - } - //check before and after - for (const position of bna) { - const matches = classname.match(new RegExp(`^${position}\\-${name}$`)); + return (classnames: string[], stylesheet: Stylesheet, cache: Set) => { + //filter out the classnames that are already defined + const todo = classnames.filter(classname => !cache.has(classname)); + for (const classname of todo) { + for (const token of expressions) { + //extract the responsive, selector, + //and style from the definition + const { media, pattern, step, pseudo } = token; + const matches = classname.match(new RegExp(`^${pattern}$`)); if (matches) { //extract the selector and arguments const [ classname, ...args ] = Array.from(matches); //replace the arguments in the style const styles = token.styles.clone(); - args.forEach( - (arg, index) => styles.replaceAll('$' + (index + 1), arg) - ); + args.forEach((arg, index) => styles.replaceAll( + '$' + (index + 1), + String(!isNaN(Number(arg)) + ? Number(arg) * (step[index] || 1) + : arg + ) + )); + const selector = pseudo + ? `.${classname}::${pseudo}` + : `.${classname}`; //add the styles to the stylesheet - stylesheet.map('all', `.${classname}::${position}`, styles); - } - } - //check responsive - for (const size of media) { - const matches = classname.match(new RegExp(`^${size}\\-${name}$`)); - if (matches) { - //extract the selector and arguments - const [ classname, ...args ] = Array.from(matches); - //replace the arguments in the style - const styles = token.styles.clone(); - args.forEach( - (arg, index) => styles.replaceAll('$' + (index + 1), arg) - ); - //add the styles to the stylesheet - stylesheet.map(size as Media, `.${classname}`, styles); - } - //check before and after - for (const position of bna) { - const matches = classname.match(new RegExp(`^${size}\\-${position}\\-${name}$`)); - if (matches) { - //extract the selector and arguments - const [ classname, ...args ] = Array.from(matches); - //replace the arguments in the style - const styles = token.styles.clone(); - args.forEach( - (arg, index) => styles.replaceAll('$' + (index + 1), arg) - ); - //add the styles to the stylesheet - stylesheet.map(size as Media, `.${classname}::${position}`, styles); - } + stylesheet.map(media, selector, styles); + //add to cache + cache.add(classname); + break; } } } @@ -172,14 +170,13 @@ export default class Stylers extends Set { * Returns a stylesheet populated with styles. */ public parse(parser: StyleParser) { + const cache = new Set(); const stylesheet = new Stylesheet(); - // Walk the parser and get each classname found - for (const classname of parser.walk()) { - // Apply each stylist to the classname - for (const stylist of this) { - //the stylist should populate this._styles - stylist(classname, stylesheet); - } + const classnames = parser.parse(); + // Apply each stylist to the classname + for (const stylist of this) { + //the stylist should populate this._styles + stylist(classnames, stylesheet, cache); } return stylesheet; } diff --git a/packages/temple-ui-src/src/compiler/data/definitions.ts b/packages/temple-ui-src/src/compiler/data/definitions.ts index 045dd5a..fe276ea 100644 --- a/packages/temple-ui-src/src/compiler/data/definitions.ts +++ b/packages/temple-ui-src/src/compiler/data/definitions.ts @@ -1,25 +1,28 @@ import type { + Media, Token, ExpressionToken, LiteralToken, - RangeToken, + RangeToken } from '../types'; import { literal, - range, expression, + range, sizes, xsizes, colors, - percents + percents, + media, + bna } from '../helpers'; /** * Returns a pre-defined list of literal definitions */ export function literals(): LiteralToken[] { - return [ + const tokens = [ //----------------------------------------------------------------// // FIXED VALUES @@ -98,13 +101,14 @@ export function literals(): LiteralToken[] { literal('w-auto', { width: [ 'auto' ] }), literal('vh', { height: [ '100vh' ] }), literal('vw', { width: [ '100vw' ] }), - literal('wm-auto', { 'max-width': [ 'auto' ] }), - literal('wm-xs', { 'max-width': [ '360px' ] }), - literal('wm-sm', { 'max-width': [ '420px' ] }), - literal('wm-md', { 'max-width': [ '767px' ] }), - literal('wm-lg', { 'max-width': [ '992px' ] }), - literal('wm-xl', { 'max-width': [ '1024px' ] }), - literal('wm-full', { 'max-width': [ '100%' ] }), + literal('mh-auto', { 'max-height': [ 'auto' ] }), + literal('mw-auto', { 'max-width': [ 'auto' ] }), + literal('mw-xs', { 'max-width': [ '360px' ] }), + literal('mw-sm', { 'max-width': [ '420px' ] }), + literal('mw-md', { 'max-width': [ '767px' ] }), + literal('mw-lg', { 'max-width': [ '992px' ] }), + literal('mw-xl', { 'max-width': [ '1024px' ] }), + literal('mw-full', { 'max-width': [ '100%' ] }), // Background literal('bg-none', { 'background-color': [ 'transparent', '!important' ] }), @@ -158,20 +162,20 @@ export function literals(): LiteralToken[] { literal('tx-bottom', { 'vertical-align': [ 'bottom' ] }), // Border - literal('bd-solid', { 'border-style': [ 'solid' ] }), - literal('bd-dashed', { 'border-style': [ 'dashed' ] }), - literal('bd-dotted', { 'border-style': [ 'dotted' ] }), - literal('bd-collapse', { 'border-collapse': [ 'collapse' ] }), - literal('bd-transparent', { 'border-color': [ 'transparent' ] }), - literal('bdb-transparent', { 'border-bottom-color': [ 'transparent' ] }), - literal('bdl-transparent', { 'border-left-color': [ 'transparent' ] }), - literal('bdr-transparent', { 'border-right-color': [ 'transparent' ] }), - literal('bdt-transparent', { 'border-top-color': [ 'transparent' ] }), - literal('bdx-transparent', { + literal('b-solid', { 'border-style': [ 'solid' ] }), + literal('b-dashed', { 'border-style': [ 'dashed' ] }), + literal('b-dotted', { 'border-style': [ 'dotted' ] }), + literal('b-collapse', { 'border-collapse': [ 'collapse' ] }), + literal('b-transparent', { 'border-color': [ 'transparent' ] }), + literal('bb-transparent', { 'border-bottom-color': [ 'transparent' ] }), + literal('bl-transparent', { 'border-left-color': [ 'transparent' ] }), + literal('br-transparent', { 'border-right-color': [ 'transparent' ] }), + literal('bt-transparent', { 'border-top-color': [ 'transparent' ] }), + literal('bx-transparent', { 'border-left-color': [ 'transparent' ], 'border-right-color': [ 'transparent' ] }), - literal('bdy-transparent', { + literal('by-transparent', { 'border-bottom-color': [ 'transparent' ], 'border-top-color': [ 'transparent' ] }), @@ -190,11 +194,6 @@ export function literals(): LiteralToken[] { literal('pill-r', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }), literal('pill-t', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }), literal('pill-b', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }), - literal('curve-full', { 'border-radius': [ '10000px' ] }), - literal('curve-l-full', { 'border-radius': [ '10000px', '0', '0', '10000px' ] }), - literal('curve-r-full', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }), - literal('curve-t-full', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }), - literal('curve-b-full', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }), // Margin literal('m-auto', { margin: [ 'auto' ] }), @@ -265,149 +264,168 @@ export function literals(): LiteralToken[] { // Border ...colors.map( - //bda-primary, bda-secondary, bda-black, bda-white, - //bda-info, bda-error, bda-warning, bda-success, bda-muted - color => literal(`bda-${color}`, { 'border': [ '1px', 'solid', `var(--${color})` ] }) + //ba-primary, ba-secondary, ba-black, ba-white, + //ba-info, b-error, ba-warning, ba-success, ba-muted + color => literal(`ba-${color}`, { 'border': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdb-primary, bdb-secondary, bdb-black, bdb-white, - //bdb-info, bdb-error, bdb-warning, bdb-success, bdb-muted - color => literal(`bdb-${color}`, { 'border-bottom': [ '1px', 'solid', `var(--${color})` ] }) + //bb-primary, bb-secondary, bb-black, bb-white, + //bb-info, bb-error, bb-warning, bb-success, bb-muted + color => literal(`bb-${color}`, { 'border-bottom': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdl-primary, bdl-secondary, bdl-black, bdl-white, bdl-info, - //bdl-error, bdl-warning, bdl-success, bdl-muted - color => literal(`bdl-${color}`, { 'border-left': [ '1px', 'solid', `var(--${color})` ] }) + //bl-primary, bl-secondary, bl-black, bl-white, bl-info, + //bl-error, bl-warning, bl-success, bl-muted + color => literal(`bl-${color}`, { 'border-left': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdr-primary, bdr-secondary, bdr-black, bdr-white, - //bdr-info, bdr-error, bdr-warning, bdr-success, bdr-muted - color => literal(`bdr-${color}`, { 'border-right': [ '1px', 'solid', `var(--${color})` ] }) + //br-primary, br-secondary, br-black, br-white, + //br-info, br-error, br-warning, br-success, br-muted + color => literal(`br-${color}`, { 'border-right': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdt-primary, bdt-secondary, bdt-black, bdt-white, - //bdt-info, bdt-error, bdt-warning, bdt-success, bdt-muted - color => literal(`bdt-${color}`, { 'border-top': [ '1px', 'solid', `var(--${color})` ] }) + //bt-primary, bt-secondary, bt-black, bt-white, + //bt-info, bt-error, bt-warning, bt-success, bt-muted + color => literal(`bt-${color}`, { 'border-top': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdx-primary, bdx-secondary, bdx-black, bdx-white, - //bdx-info, bdx-error, bdx-warning, bdx-success, bdx-muted - color => literal(`bdx-${color}`, { + //bx-primary, bx-secondary, bx-black, bx-white, + //bx-info, bx-error, bx-warning, bx-success, bx-muted + color => literal(`bx-${color}`, { 'border-left': [ '1px', 'solid', `var(--${color})` ], 'border-right': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bdy-primary, bdy-secondary, bdy-black, bdy-white, - //bdy-info, bdy-error, bdy-warning, bdy-success, bdy-muted - color => literal(`bdy-${color}`, { + //by-primary, by-secondary, by-black, by-white, + //by-info, by-error, by-warning, by-success, by-muted + color => literal(`by-${color}`, { 'border-bottom': [ '1px', 'solid', `var(--${color})` ], 'border-top': [ '1px', 'solid', `var(--${color})` ] }) ), ...colors.map( - //bd-primary, bd-secondary, bd-black, bd-white, - //bd-info, bd-error, bd-warning, bd-success, bd-muted - color => literal(`bd-${color}`, { + //b-primary, b-secondary, b-black, b-white, + //b-info, b-error, b-warning, b-success, b-muted + color => literal(`b-${color}`, { 'border-color': [ `var(--${color})`, '!important' ] }) ), - ...sizes.map(//bd-xs, bd-sm, bd-md, bd-lg, bd-xl - (size, i) => literal(`bd-${size}`, { + ...sizes.map(//b-xs, b-sm, b-md, b-lg, b-xl + (size, i) => literal(`b-${size}`, { 'border-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdt-xs, bdt-sm, bdt-md, bdt-lg, bdt-xl - (size, i) => literal(`bdt-${size}`, { + ...sizes.map(//bt-xs, bt-sm, bt-md, bt-lg, bt-xl + (size, i) => literal(`bt-${size}`, { 'border-top-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdb-xs, bdb-sm, bdb-md, bdb-lg, bdb-xl - (size, i) => literal(`bdb-${size}`, { + ...sizes.map(//bb-xs, bb-sm, bb-md, bb-lg, bb-xl + (size, i) => literal(`bb-${size}`, { 'border-bottom-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdl-xs, bdl-sm, bdl-md, bdl-lg, bdl-xl - (size, i) => literal(`bdl-${size}`, { + ...sizes.map(//bl-xs, bl-sm, bl-md, bl-lg, bl-xl + (size, i) => literal(`bl-${size}`, { 'border-left-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdr-xs, bdr-sm, bdr-md, bdr-lg, bdr-xl - (size, i) => literal(`bdr-${size}`, { + ...sizes.map(//br-xs, br-sm, br-md, br-lg, br-xl + (size, i) => literal(`br-${size}`, { 'border-right-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdx-xs, bdx-sm, bdx-md, bdx-lg, bdx-xl - (size, i) => literal(`bdx-${size}`, { + ...sizes.map(//bx-xs, bx-sm, bx-md, bx-lg, bx-xl + (size, i) => literal(`bx-${size}`, { 'border-left-width': [ `${i + 1}px` ], 'border-right-width': [ `${i + 1}px` ] }) ), - ...sizes.map(//bdy-xs, bdy-sm, bdy-md, bdy-lg, bdy-xl - (size, i) => literal(`bdy-${size}`, { + ...sizes.map(//by-xs, by-sm, by-md, by-lg, by-xl + (size, i) => literal(`by-${size}`, { 'border-top-width': [ `${i + 1}px` ], 'border-bottom-width': [ `${i + 1}px` ] }) ), ...xsizes.map( - //curve-xs, curve-sm, curve-md, curve-lg, curve-xl, - //curve-2xl, curve-3xl, curve-4xl, curve-5xl - (size, i) => literal(`curve-${size}`, { + //c-xs, c-sm, c-md, c-lg, c-xl, + //c-2xl, c-3xl, c-4xl, c-5xl + (size, i) => literal(`c-${size}`, { 'border-radius': [ `${(i + 1) * 2}px` ] }) ), ...xsizes.map( - //curve-l-xs, curve-l-sm, curve-l-md, curve-l-lg, curve-l-xl, - //curve-l-2xl, curve-l-3xl, curve-l-4xl, curve-l-5xl - (size, i) => literal(`curve-l-${size}`, { + //cl-xs, cl-sm, cl-md, cl-lg, cl-xl, + //cl-2xl, cl-3xl, cl-4xl, cl-5xl + (size, i) => literal(`cl-${size}`, { 'border-radius': [ `${(i + 1) * 2}px`, '0', '0', `${(i + 1) * 2}px` ] }) ), ...xsizes.map( - //curve-r-xs, curve-r-sm, curve-r-md, curve-r-lg, curve-r-xl, - //curve-r-2xl, curve-r-3xl, curve-r-4xl, curve-r-5xl - (size, i) => literal(`curve-r-${size}`, { + //cr-xs, cr-sm, cr-md, cr-lg, cr-xl, + //cr-2xl, cr-3xl, cr-4xl, cr-5xl + (size, i) => literal(`cr-${size}`, { 'border-radius': [ '0', `${(i + 1) * 2}px`, `${(i + 1) * 2}px`, '0' ] }) ), ...xsizes.map( - //curve-t-xs, curve-t-sm, curve-t-md, curve-t-lg, curve-t-xl, - //curve-t-2xl, curve-t-3xl, curve-t-4xl, curve-t-5xl - (size, i) => literal(`curve-t-${size}`, { + //ct-xs, ct-sm, ct-md, ct-lg, ct-xl, + //ct-2xl, ct-3xl, ct-4xl, ct-5xl + (size, i) => literal(`ct-${size}`, { 'border-radius': [ `${(i + 1) * 2}px`, `${(i + 1) * 2}px`, '0', '0' ] }) ), ...xsizes.map( - //curve-b-xs, curve-b-sm, curve-b-md, curve-b-lg, curve-b-xl - //curve-b-2xl, curve-b-3xl, curve-b-4xl, curve-b-5xl - (size, i) => literal(`curve-b-${size}`, { + //cb-xs, cb-sm, cb-md, cb-lg, cb-xl + //cb-2xl, cb-3xl, cb-4xl, cb-5xl + (size, i) => literal(`cb-${size}`, { 'border-radius': [ '0', '0', `${(i + 1) * 2}px`, `${(i + 1) * 2}px` ] }) - ), + ) ]; + + const literals = Array.from(tokens); + + tokens.forEach(token => { + const { classname, styles } = token; + //add bna, media + media.forEach(media => { + literals.push(literal(classname, styles, media as Media)); + bna.forEach(position => { + literals.push(literal( + classname, + styles, + media as Media, + position + )); + }); + }); + }); + + return literals; }; -/** - * Returns a pre-defined list of range definitions - */ -export function ranges(): RangeToken[] { +export function ranges(): RangeToken[] { return [ - // Opacity - range('o-$', { opacity: [ '$' ] }, 0, 1, 0.01), - // Border - range('bd-$', { 'border-width': [ '$px' ] }, 0, 20), - range('bdb-$', { 'border-bottom-width': [ '$px' ] }, 0, 20), - range('bdl-$', { 'border-left-width': [ '$px' ] }, 0, 20), - range('bdr-$', { 'border-right-width': [ '$px' ] }, 0, 20), - range('bdt-$', { 'border-top-width': [ '$px' ] }, 0, 20), - range('bdx-$', { - 'border-left-width': [ '$px' ], - 'border-right-width': [ '$px' ] - }, 0, 20), - range('bdy-$', { - 'border-bottom-width': [ '$px' ], - 'border-top-width': [ '$px' ] - }, 0, 20), + //directional, calculable, negatable, measurable + range('h', 'height', false, true, false, true), + range('w', 'width', false, true, false, true), + range('m', 'margin', true, true, true, true), + range('p', 'padding', true, true, false, true), + range('mw', 'max-width', false, true, false, true), + range('mh', 'max-height', false, true, false, true), + range('bottom', 'bottom', false, false, true, true), + range('left', 'left', false, false, true, true), + range('right', 'right', false, false, true, true), + range('top', 'top', false, false, true, true), + range('z', 'z-index', false, false, true, false), + range('o', 'opacity', false, false, false, false), + range('basis', 'flex-basis', false, true, false, true), + range('gap', 'gap', false, true, false, true), + range('tx-lh', 'line-height', false, false, false, true), + range('tx', 'font-size', false, false, false, true), + range('b', 'border-width', true, true, false, true) ]; }; @@ -415,78 +433,41 @@ export function ranges(): RangeToken[] { * Returns a pre-defined list of expression definitions */ export function expressions(): ExpressionToken[] { - return [ + const tokens = [ //----------------------------------------------------------------// // FIXED EXPRESSIONS - - // Position - expression('bottom\\-(\\-{0,1}\\d+)', { bottom: [ '$1px' ] }), - expression('left\\-(\\-{0,1}\\d+)', { left: [ '$1px' ] }), - expression('right\\-(\\-{0,1}\\d+)', { right: [ '$1px' ] }), - expression('top\\-(\\-{0,1}\\d+)', { top: [ '$1px' ] }), - expression('z\\-(\\d+)', { 'z-index': [ '$1' ] }), - - // Flex - expression('basis\\-(\\d+)', { 'flex-basis': [ '$1px' ] }), - expression('basis\\-p\\-(\\d+)', { 'flex-basis': [ '$1%' ] }), - expression('gap\\-(\\d+)', { 'gap': [ '$1px' ] }), - - // Size - expression('h\\-(\\d+)', { height: [ '$1px' ] }), - expression('h\\-calc\\-(\\d+)-(\\d+)', { height: [ 'calc($1% - $2px)' ] }), - expression('w\\-(\\d+)', { width: [ '$1px' ] }), - expression('wp\\-(\\d+)', { width: [ '$1%' ] }), - expression('w\\-calc\\-(\\d+)-(\\d+)', { width: [ 'calc($1% - $2px)' ] }), - expression('wm\\-(\\d+)', { 'max-width': [ '$1px' ] }), // Background expression('bg\\-t\\-(\\d+)', { 'background-color': [ 'var(--bg-$1)' ] }), expression('bg\\-h\\-([0-9a-f]{3,6})', { 'background-color': [ '#$1' ] }), // Text - expression('tx\\-(\\d+)', { 'font-size': [ '$1px' ] }), - expression('tx\\-lh\\-(\\d+)', { 'line-height': [ '$1px' ] }), expression('tx\\-t\\-(\\d+)', { 'color': [ 'var(--tx-$1)' ] }), expression('tx\\-h\\-([0-9a-f]{3,6})', { 'color': [ '#$1' ] }), // Border - expression('bd\\-t\\-(\\d+)', { 'border-color': [ 'var(--bd-$1)' ] }), - expression('bd\\-h\\-([0-9a-f]{3,6})', { 'border-color': [ '#$1' ] }), - expression('curve\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '$1px', '$1px' ] }), - expression('curve\\-b\\-(\\d+)', { 'border-radius': [ '0', '0', '$1px', '$1px' ] }), - expression('curve\\-l\\-(\\d+)', { 'border-radius': [ '$1px', '0', '0', '$1px' ] }), - expression('curve\\-r\\-(\\d+)', { 'border-radius': [ '0', '$1px', '$1px', '0' ] }), - expression('curve\\-t\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '0', '0' ] }), - - // Margin - expression('m\\-(\\-{0,1}\\d+)', { margin: [ '$1px' ] }), - expression('mb\\-(\\-{0,1}\\d+)', { 'margin-bottom': [ '$1px' ] }), - expression('ml\\-(\\-{0,1}\\d+)', { 'margin-left': [ '$1px' ] }), - expression('mr\\-(\\-{0,1}\\d+)', { 'margin-right': [ '$1px' ] }), - expression('mt\\-(\\-{0,1}\\d+)', { 'margin-top': [ '$1px' ] }), - expression('mx\\-(\\-{0,1}\\d+)', { - 'margin-left': [ '$1px' ], - 'margin-right': [ '$1px' ] - }), - expression('my\\-(\\-{0,1}\\d+)', { - 'margin-top': [ '$1px' ], - 'margin-bottom': [ '$1px' ] - }), - - // Padding - expression('p\\-(\\d+)', { padding: [ '$1px' ] }), - expression('pb\\-(\\d+)', { 'padding-bottom': [ '$1px' ] }), - expression('pl\\-(\\d+)', { 'padding-left': [ '$1px' ] }), - expression('pr\\-(\\d+)', { 'padding-right': [ '$1px' ] }), - expression('pt\\-(\\d+)', { 'padding-top': [ '$1px' ] }), - expression('px\\-(\\d+)', { - 'padding-left': [ '$1px' ], - 'padding-right': [ '$1px' ] - }), - expression('py\\-(\\d+)', { - 'padding-top': [ '$1px' ], - 'padding-bottom': [ '$1px' ] - }), + expression('b\\-t\\-(\\d+)', { 'border-color': [ 'var(--bd-$1)' ] }), + expression('b\\-h\\-([0-9a-f]{3,6})', { 'border-color': [ '#$1' ] }), + expression('c\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '$1px', '$1px' ] }), + //expression('c\\-(\\d+)p', { 'border-radius': [ '$1%', '$1%', '$1%', '$1%' ] }), + //expression('c\\-(\\d+)e', { 'border-radius': [ '$1em', '$1em', '$1em', '$1em' ] }, [ 0.01 ]), + //expression('c\\-(\\d+)r', { 'border-radius': [ '$1rem', '$1rem', '$1rem', '$1rem' ] }, [ 0.01 ]), + expression('cb\\-(\\d+)', { 'border-radius': [ '0', '0', '$1px', '$1px' ] }), + //expression('cb\\-(\\d+)p', { 'border-radius': [ '0', '0', '$1%', '$1%' ] }), + //expression('cb\\-(\\d+)e', { 'border-radius': [ '0', '0', '$1em', '$1em' ] }, [ 0.01 ]), + //expression('cb\\-(\\d+)r', { 'border-radius': [ '0', '0', '$1rem', '$1rem' ] }, [ 0.01 ]), + expression('cl\\-(\\d+)', { 'border-radius': [ '$1px', '0', '0', '$1px' ] }), + //expression('cl\\-(\\d+)p', { 'border-radius': [ '$1%', '0', '0', '$1%' ] }), + //expression('cl\\-(\\d+)e', { 'border-radius': [ '$1em', '0', '0', '$1em' ] }, [ 0.01 ]), + //expression('cl\\-(\\d+)r', { 'border-radius': [ '$1rem', '0', '0', '$1rem' ] }, [ 0.01 ]), + expression('cr\\-(\\d+)', { 'border-radius': [ '0', '$1px', '$1px', '0' ] }), + //expression('cr\\-(\\d+)p', { 'border-radius': [ '0', '$1%', '$1%', '0' ] }), + //expression('cr\\-(\\d+)e', { 'border-radius': [ '0', '$1em', '$1em', '0' ] }, [ 0.01 ]), + //expression('cr\\-(\\d+)r', { 'border-radius': [ '0', '$1rem', '$1rem', '0' ] }, [ 0.01 ]), + expression('ct\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '0', '0' ] }), + //expression('ct\\-(\\d+)p', { 'border-radius': [ '$1%', '$1%', '0', '0' ] }), + //expression('ct\\-(\\d+)e', { 'border-radius': [ '$1em', '$1em', '0', '0' ] }, [ 0.01 ]), + //expression('ct\\-(\\d+)r', { 'border-radius': [ '$1rem', '$1rem', '0', '0' ] }, [ 0.01 ]), //Animation expression('transition\\-(\\d+)', { 'transition-duration': [ '$1ms' ] }), @@ -498,7 +479,8 @@ export function expressions(): ExpressionToken[] { ), expression( 'shadow\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)', - { 'box-shadow': [ '$1px $2px $3px rgb($4, $5, $6, 0.$7)' ] } + { 'box-shadow': [ '$1px $2px $3px rgb($4, $5, $6, $7)' ] }, + [ 1, 1, 1, 1, 1, 1, 0.01 ] ), //----------------------------------------------------------------// @@ -511,13 +493,243 @@ export function expressions(): ExpressionToken[] { 'height': [ `calc(${value}% - $1px)` ] }) ), + // ...percents.map( + // //h-calc-full-99e, h-calc-half-99e, h-calc-third-99e, h-calc-fourth-99e, h-calc-fifth-99e + // ([ name, value ]) => expression(`h\\-calc\\-${name}-(\\d+)e`, { + // 'height': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //h-calc-full-99r, h-calc-half-99r, h-calc-third-99r, h-calc-fourth-99r, h-calc-fifth-99r + // ([ name, value ]) => expression(`h\\-calc\\-${name}-(\\d+)r`, { + // 'height': [ `calc(${value}% - $1rem)` ] + // }) + // ), ...percents.map( //w-calc-full-99, w-calc-half-99, w-calc-third-99, w-calc-fourth-99, w-calc-fifth-99 ([ name, value ]) => expression(`w\\-calc\\-${name}-(\\d+)`, { 'width': [ `calc(${value}% - $1px)` ] }) - ) + ), + // ...percents.map( + // //w-calc-full-99e, w-calc-half-99e, w-calc-third-99e, w-calc-fourth-99e, w-calc-fifth-99e + // ([ name, value ]) => expression(`w\\-calc\\-${name}-(\\d+)e`, { + // 'width': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //w-calc-full-99r, w-calc-half-99r, w-calc-third-99r, w-calc-fourth-99r, w-calc-fifth-99r + // ([ name, value ]) => expression(`w\\-calc\\-${name}-(\\d+)r`, { + // 'width': [ `calc(${value}% - $1rem)` ] + // }) + // ), + + // Margin + ...percents.map( + //m-calc-full-99, m-calc-half-99, m-calc-third-99, m-calc-fourth-99, m-calc-fifth-99 + ([ name, value ]) => expression(`m\\-calc\\-${name}-(\\d+)`, { + 'margin': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //m-calc-full-99e, m-calc-half-99e, m-calc-third-99e, m-calc-fourth-99e, m-calc-fifth-99e + // ([ name, value ]) => expression(`m\\-calc\\-${name}-(\\d+)e`, { + // 'margin': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //m-calc-full-99r, m-calc-half-99r, m-calc-third-99r, m-calc-fourth-99r, m-calc-fifth-99r + // ([ name, value ]) => expression(`m\\-calc\\-${name}-(\\d+)r`, { + // 'margin': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //ml-calc-full-99, ml-calc-half-99, ml-calc-third-99, ml-calc-fourth-99, ml-calc-fifth-99 + ([ name, value ]) => expression(`ml\\-calc\\-${name}-(\\d+)`, { + 'margin-left': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //ml-calc-full-99e, ml-calc-half-99e, ml-calc-third-99e, ml-calc-fourth-99e, ml-calc-fifth-99e + // ([ name, value ]) => expression(`ml\\-calc\\-${name}-(\\d+)e`, { + // 'margin-left': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //ml-calc-full-99r, ml-calc-half-99r, ml-calc-third-99r, ml-calc-fourth-99r, ml-calc-fifth-99r + // ([ name, value ]) => expression(`ml\\-calc\\-${name}-(\\d+)r`, { + // 'margin-left': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //mr-calc-full-99, mr-calc-half-99, mr-calc-third-99, mr-calc-fourth-99, mr-calc-fifth-99 + ([ name, value ]) => expression(`mr\\-calc\\-${name}-(\\d+)`, { + 'margin-right': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //mr-calc-full-99e, mr-calc-half-99e, mr-calc-third-99e, mr-calc-fourth-99e, mr-calc-fifth-99e + // ([ name, value ]) => expression(`mr\\-calc\\-${name}-(\\d+)e`, { + // 'margin-right': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //mr-calc-full-99r, mr-calc-half-99r, mr-calc-third-99r, mr-calc-fourth-99r, mr-calc-fifth-99r + // ([ name, value ]) => expression(`mr\\-calc\\-${name}-(\\d+)r`, { + // 'margin-right': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //mt-calc-full-99, mt-calc-half-99, mt-calc-third-99, mt-calc-fourth-99, mt-calc-fifth-99 + ([ name, value ]) => expression(`mt\\-calc\\-${name}-(\\d+)`, { + 'margin-top': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //mt-calc-full-99e, mt-calc-half-99e, mt-calc-third-99e, mt-calc-fourth-99e, mt-calc-fifth-99e + // ([ name, value ]) => expression(`mt\\-calc\\-${name}-(\\d+)e`, { + // 'margin-top': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //mt-calc-full-99r, mt-calc-half-99r, mt-calc-third-99r, mt-calc-fourth-99r, mt-calc-fifth-99r + // ([ name, value ]) => expression(`mt\\-calc\\-${name}-(\\d+)r`, { + // 'margin-top': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //mb-calc-full-99, mb-calc-half-99, mb-calc-third-99, mb-calc-fourth-99, mb-calc-fifth-99 + ([ name, value ]) => expression(`mb\\-calc\\-${name}-(\\d+)`, { + 'margin-bottom': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //mb-calc-full-99e, mb-calc-half-99e, mb-calc-third-99e, mb-calc-fourth-99e, mb-calc-fifth-99e + // ([ name, value ]) => expression(`mb\\-calc\\-${name}-(\\d+)e`, { + // 'margin-bottom': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //mb-calc-full-99r, mb-calc-half-99r, mb-calc-third-99r, mb-calc-fourth-99r, mb-calc-fifth-99r + // ([ name, value ]) => expression(`mb\\-calc\\-${name}-(\\d+)r`, { + // 'margin-bottom': [ `calc(${value}% - $1rem)` ] + // }) + // ), + + // Padding + ...percents.map( + //p-calc-full-99, p-calc-half-99, p-calc-third-99, p-calc-fourth-99, p-calc-fifth-99 + ([ name, value ]) => expression(`p\\-calc\\-${name}-(\\d+)`, { + 'padding': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //p-calc-full-99e, p-calc-half-99e, p-calc-third-99e, p-calc-fourth-99e, p-calc-fifth-99e + // ([ name, value ]) => expression(`p\\-calc\\-${name}-(\\d+)e`, { + // 'padding': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //p-calc-full-99r, p-calc-half-99r, p-calc-third-99r, p-calc-fourth-99r, p-calc-fifth-99r + // ([ name, value ]) => expression(`p\\-calc\\-${name}-(\\d+)r`, { + // 'padding': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //pl-calc-full-99, pl-calc-half-99, pl-calc-third-99, pl-calc-fourth-99, pl-calc-fifth-99 + ([ name, value ]) => expression(`pl\\-calc\\-${name}-(\\d+)`, { + 'padding-left': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //pl-calc-full-99e, pl-calc-half-99e, pl-calc-third-99e, pl-calc-fourth-99e, pl-calc-fifth-99e + // ([ name, value ]) => expression(`pl\\-calc\\-${name}-(\\d+)e`, { + // 'padding-left': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //pl-calc-full-99r, pl-calc-half-99r, pl-calc-third-99r, pl-calc-fourth-99r, pl-calc-fifth-99r + // ([ name, value ]) => expression(`pl\\-calc\\-${name}-(\\d+)r`, { + // 'padding-left': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //pr-calc-full-99, pr-calc-half-99, pr-calc-third-99, pr-calc-fourth-99, pr-calc-fifth-99 + ([ name, value ]) => expression(`pr\\-calc\\-${name}-(\\d+)`, { + 'padding-right': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //pr-calc-full-99e, pr-calc-half-99e, pr-calc-third-99e, pr-calc-fourth-99e, pr-calc-fifth-99e + // ([ name, value ]) => expression(`pr\\-calc\\-${name}-(\\d+)e`, { + // 'padding-right': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //pr-calc-full-99r, pr-calc-half-99r, pr-calc-third-99r, pr-calc-fourth-99r, pr-calc-fifth-99r + // ([ name, value ]) => expression(`pr\\-calc\\-${name}-(\\d+)r`, { + // 'padding-right': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //pt-calc-full-99, pt-calc-half-99, pt-calc-third-99, pt-calc-fourth-99, pt-calc-fifth-99 + ([ name, value ]) => expression(`pt\\-calc\\-${name}-(\\d+)`, { + 'padding-top': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //pt-calc-full-99e, pt-calc-half-99e, pt-calc-third-99e, pt-calc-fourth-99e, pt-calc-fifth-99e + // ([ name, value ]) => expression(`pt\\-calc\\-${name}-(\\d+)e`, { + // 'padding-top': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //pt-calc-full-99r, pt-calc-half-99r, pt-calc-third-99r, pt-calc-fourth-99r, pt-calc-fifth-99r + // ([ name, value ]) => expression(`pt\\-calc\\-${name}-(\\d+)r`, { + // 'padding-top': [ `calc(${value}% - $1rem)` ] + // }) + // ), + ...percents.map( + //pb-calc-full-99, pb-calc-half-99, pb-calc-third-99, pb-calc-fourth-99, pb-calc-fifth-99 + ([ name, value ]) => expression(`pb\\-calc\\-${name}-(\\d+)`, { + 'padding-bottom': [ `calc(${value}% - $1px)` ] + }) + ), + // ...percents.map( + // //pb-calc-full-99e, pb-calc-half-99e, pb-calc-third-99e, pb-calc-fourth-99e, pb-calc-fifth-99e + // ([ name, value ]) => expression(`pb\\-calc\\-${name}-(\\d+)e`, { + // 'padding-bottom': [ `calc(${value}% - $1em)` ] + // }) + // ), + // ...percents.map( + // //pb-calc-full-99r, pb-calc-half-99r, pb-calc-third-99r, pb-calc-fourth-99r, pb-calc-fifth-99r + // ([ name, value ]) => expression(`pb\\-calc\\-${name}-(\\d+)r`, { + // 'padding-bottom': [ `calc(${value}% - $1rem)` ] + // }) + // ) ]; + + const expressions = Array.from(tokens); + + //add bna, media + tokens.forEach(token => { + const { pattern, styles, step } = token; + //add bna, media + media.forEach(media => { + expressions.push(expression(pattern, styles, step, media as Media)); + bna.forEach(position => { + expressions.push(expression( + pattern, + styles, + step, + media as Media, + position + )); + }); + }); + }); + + return expressions; }; /** @@ -526,7 +738,6 @@ export function expressions(): ExpressionToken[] { export function definitions(): Token[] { return [ ...literals(), - ...expressions(), - ...ranges() + ...expressions() ]; }; \ No newline at end of file diff --git a/packages/temple-ui-src/src/compiler/helpers.ts b/packages/temple-ui-src/src/compiler/helpers.ts index e27f36f..31c4e50 100644 --- a/packages/temple-ui-src/src/compiler/helpers.ts +++ b/packages/temple-ui-src/src/compiler/helpers.ts @@ -2,8 +2,8 @@ import type { Media, StyleRecord, ExpressionToken, - LiteralToken, - RangeToken, + LiteralToken, + RangeToken } from './types'; import StyleMap from './StyleMap'; @@ -50,48 +50,82 @@ export const percents = Object.entries({ */ export function literal( name: string, - records: StyleRecord + records: StyleRecord|StyleMap, + media: Media = 'all', + pseudo?: string ): LiteralToken { - const styles = new StyleMap(Object.entries(records)); + const styles = records instanceof StyleMap + ? records.clone() + : new StyleMap(Object.entries(records)); + let selector = `.${name}`; + let classname = name; + if (media !== 'all') { + classname = `${media}-${name}`; + selector = `.${classname}`; + if (pseudo) { + classname = `${media}-${pseudo}-${name}`; + selector = `.${classname}::${pseudo}`; + } + } else if (pseudo) { + classname = `${pseudo}-${name}`; + selector = `.${classname}::${pseudo}`; + } return { type: 'literal', - name, - styles + media, + classname, + styles, + selector }; }; -/** - * Helper to form a range token. - */ export function range( - name: string, - records: StyleRecord, - min: number, - max: number, - step = 1 + name: string, // ex. 'm' + property: string, // ex. 'margin' + directional: boolean, + calculable: boolean, + negatable: boolean, + measurable: boolean ): RangeToken { - const styles = new StyleMap(Object.entries(records)); return { - type: 'range', name, - styles, - range: [ min, max ], - step - }; -}; + property, + directional, + calculable, + measurable, + negatable + } +} /** * Helper to form an expression token. */ export function expression( - name: string, - records: StyleRecord + regex: string, + records: StyleRecord|StyleMap, + step: number[] = [], + media: Media = 'all', + pseudo?: string ): ExpressionToken { - const styles = new StyleMap(Object.entries(records)); + const styles = records instanceof StyleMap + ? records.clone() + : new StyleMap(Object.entries(records)); + let pattern = regex; + if (media !== 'all') { + pattern = `${media}\\-${regex}`; + if (pseudo) { + pattern = `${media}\\-${pseudo}\\-${regex}`; + } + } else if (pseudo) { + pattern = `${pseudo}\\-${regex}`; + } return { type: 'expression', - name, - styles + media, + pattern, + styles, + step, + pseudo }; }; diff --git a/packages/temple-ui-src/src/compiler/index.ts b/packages/temple-ui-src/src/compiler/index.ts index b2e483a..05ea54d 100644 --- a/packages/temple-ui-src/src/compiler/index.ts +++ b/packages/temple-ui-src/src/compiler/index.ts @@ -1,7 +1,6 @@ import { components } from './data/components'; import { literals, - ranges, expressions, definitions } from './data/definitions'; @@ -14,8 +13,8 @@ import { theme } from './plugins/theme'; import { utilities } from './plugins/utilities'; import { expression as toExpression, - literal as toLiteral, range as toRange, + literal as toLiteral, media, breakpoints, responsive, @@ -35,8 +34,8 @@ import StyleMap from './StyleMap'; import StyleParser from './StyleParser'; import Stylers, { expression as expressionStyler, - literal as literalStyler, - range as rangeStyler + range as rangeStyler, + literal as literalStyler } from './Stylers'; import StyleSet from './StyleSet'; import StyleSheet from './StyleSheet'; @@ -46,7 +45,6 @@ export type * from './types'; export { components, literals, - ranges, expressions, definitions, component, @@ -59,13 +57,13 @@ export { theme, utilities, toExpression, - toLiteral, toRange, + toLiteral, getAsset, getUtilities, expressionStyler, - literalStyler, rangeStyler, + literalStyler, media, breakpoints, responsive, diff --git a/packages/temple-ui-src/src/compiler/temple.ts b/packages/temple-ui-src/src/compiler/temple.ts index 5cb55a5..3114202 100644 --- a/packages/temple-ui-src/src/compiler/temple.ts +++ b/packages/temple-ui-src/src/compiler/temple.ts @@ -12,14 +12,14 @@ import { theme } from './plugins/theme'; import { utilities } from './plugins/utilities'; import templeui from './templeui'; -import { expressions, literals, ranges } from './data/definitions'; -import { expression, literal, range } from './Stylers'; +import { expressions, ranges, literals } from './data/definitions'; +import { expression, range, literal } from './Stylers'; export default function tui(options: TempleUIOptions = {}) { const stylers = [ + range(ranges()), expression(expressions()), - literal(literals()), - range(ranges()) + literal(literals()) ]; return function withTui(compiler: TempleCompiler) { //whenever a component is updated, refresh the document stylesheet diff --git a/packages/temple-ui-src/src/compiler/types.ts b/packages/temple-ui-src/src/compiler/types.ts index 32187d7..c8f319c 100644 --- a/packages/temple-ui-src/src/compiler/types.ts +++ b/packages/temple-ui-src/src/compiler/types.ts @@ -9,32 +9,39 @@ export type StyleRecord = Record; export type LiteralToken = { type: 'literal', - //class name - name: string, - styles: StyleMap -}; - -export type RangeToken = { - type: 'range', - //class name - name: string, + classname: string, styles: StyleMap, - range: [ number, number ], - step: number + media: Media, + selector: string }; export type ExpressionToken = { type: 'expression', - //class name + pattern: string, + styles: StyleMap, + step: number[], + media: Media, + pseudo?: string +}; + +export type RangeToken = { name: string, - styles: StyleMap + property: string, + directional: boolean, + calculable: boolean, + negatable: boolean, + measurable: boolean }; export type Token = LiteralToken|RangeToken|ExpressionToken; export type Media = 'all'|'xs'|'sm'|'md'|'lg'|'xl'|'xl2'|'xl3'|'xl4'; -export type Styler = (classname: string, stylesheet: StyleSheet) => void; export type Plugin = (sheet: string, brand: string) => string; +export type Styler = ( + classnames: string[], + stylesheet: StyleSheet, + cache: Set +) => void; export type ParserOptions = { fs?: FileSystem, cwd?: string }; export type UtilityPluginOptions = { diff --git a/packages/temple-ui-src/src/components/alert.tml b/packages/temple-ui-src/src/components/alert.tml index ad3e5a8..73695c9 100644 --- a/packages/temple-ui-src/src/components/alert.tml +++ b/packages/temple-ui-src/src/components/alert.tml @@ -48,7 +48,7 @@ : 'solid'; //if outline or transparent if (layout === 'outline' || layout === 'transparent') { - this.classList.add('bd-solid', 'bd-thin'); + this.classList.add('b-solid', 'b-thin'); if (layout === 'outline') { this.classList.add('bg-white'); } @@ -56,19 +56,19 @@ this.style.color = color; this.style.borderColor = color; } else if (info) { - this.classList.add('bd-info', 'tx-info'); + this.classList.add('b-info', 'tx-info'); } else if (warning) { - this.classList.add('bd-warning', 'tx-warning'); + this.classList.add('b-warning', 'tx-warning'); } else if (success) { - this.classList.add('bd-success', 'tx-success'); + this.classList.add('b-success', 'tx-success'); } else if (error) { - this.classList.add('bd-error', 'tx-error'); + this.classList.add('b-error', 'tx-error'); } else if (muted) { - this.classList.add('bd-muted', 'tx-muted'); + this.classList.add('b-muted', 'tx-muted'); } else if (primary) { - this.classList.add('bd-primary', 'tx-primary'); + this.classList.add('b-primary', 'tx-primary'); } else if (secondary) { - this.classList.add('bd-secondary', 'tx-secondary'); + this.classList.add('b-secondary', 'tx-secondary'); } //it's solid } else { diff --git a/packages/temple-ui-src/src/components/badge.tml b/packages/temple-ui-src/src/components/badge.tml index 68d6f0f..c486216 100644 --- a/packages/temple-ui-src/src/components/badge.tml +++ b/packages/temple-ui-src/src/components/badge.tml @@ -48,7 +48,7 @@ : 'solid'; //if outline or transparent if (layout === 'outline' || layout === 'transparent') { - this.classList.add('bd-solid', 'bd-thin'); + this.classList.add('b-solid', 'b-thin'); if (layout === 'outline') { this.classList.add('bg-white'); } @@ -56,19 +56,19 @@ this.style.color = color; this.style.borderColor = color; } else if (info) { - this.classList.add('bd-info', 'tx-info'); + this.classList.add('b-info', 'tx-info'); } else if (warning) { - this.classList.add('bd-warning', 'tx-warning'); + this.classList.add('b-warning', 'tx-warning'); } else if (success) { - this.classList.add('bd-success', 'tx-success'); + this.classList.add('b-success', 'tx-success'); } else if (error) { - this.classList.add('bd-error', 'tx-error'); + this.classList.add('b-error', 'tx-error'); } else if (muted) { - this.classList.add('bd-muted', 'tx-muted'); + this.classList.add('b-muted', 'tx-muted'); } else if (primary) { - this.classList.add('bd-primary', 'tx-primary'); + this.classList.add('b-primary', 'tx-primary'); } else if (secondary) { - this.classList.add('bd-secondary', 'tx-secondary'); + this.classList.add('b-secondary', 'tx-secondary'); } //it's solid } else { diff --git a/packages/temple-ui-src/src/components/field/input.tml b/packages/temple-ui-src/src/components/field/input.tml index 0dfa286..9019095 100644 --- a/packages/temple-ui-src/src/components/field/input.tml +++ b/packages/temple-ui-src/src/components/field/input.tml @@ -11,17 +11,17 @@ } = host.props; const classlist = [ 'p-7', - 'bd-1', + 'b-1', 'block', - 'bd-solid', + 'b-solid', 'box-border', 'w-full', 'h-full' ]; if (error) { - classlist.push('bd-error', 'tx-error'); + classlist.push('b-error', 'tx-error'); } else { - classlist.push('bd-black', 'tx-black'); + classlist.push('b-black', 'tx-black'); } attributes['class'] = classlist.join(' '); return { error, change, update, classlist, attributes }; @@ -40,11 +40,11 @@ //set new class if (name === 'error') { if (action === 'remove') { - input.classList.remove('bd-error', 'tx-error'); - input.classList.add('bd-black', 'tx-black'); + input.classList.remove('b-error', 'tx-error'); + input.classList.add('b-black', 'tx-black'); } else { - input.classList.remove('bd-black', 'tx-black'); - input.classList.add('bd-error', 'tx-error'); + input.classList.remove('b-black', 'tx-black'); + input.classList.add('b-error', 'tx-error'); } return; //dont update if these are the names diff --git a/packages/temple-ui-src/src/components/field/textarea.tml b/packages/temple-ui-src/src/components/field/textarea.tml index e88a975..6983ca1 100644 --- a/packages/temple-ui-src/src/components/field/textarea.tml +++ b/packages/temple-ui-src/src/components/field/textarea.tml @@ -11,18 +11,18 @@ } = host.props; const classlist = [ 'p-7', - 'bd-1', + 'b-1', 'block', - 'bd-solid', + 'b-solid', 'box-border', 'w-full', 'h-full', 'tx-inherit' ]; if (error) { - classlist.push('bd-error', 'tx-error'); + classlist.push('b-error', 'tx-error'); } else { - classlist.push('bd-black', 'tx-black'); + classlist.push('b-black', 'tx-black'); } attributes['class'] = classlist.join(' '); return { error, change, update, classlist, attributes }; @@ -42,11 +42,11 @@ //set new class if (name === 'error') { if (action === 'remove') { - input.classList.remove('bd-error', 'tx-error'); - input.classList.add('bd-black', 'tx-black'); + input.classList.remove('b-error', 'tx-error'); + input.classList.add('b-black', 'tx-black'); } else { - input.classList.remove('bd-black', 'tx-black'); - input.classList.add('bd-error', 'tx-error'); + input.classList.remove('b-black', 'tx-black'); + input.classList.add('b-error', 'tx-error'); } return; //dont update if these are the names diff --git a/packages/temple-ui-src/src/components/form/button.tml b/packages/temple-ui-src/src/components/form/button.tml index 4875657..5a6c5f2 100644 --- a/packages/temple-ui-src/src/components/form/button.tml +++ b/packages/temple-ui-src/src/components/form/button.tml @@ -91,7 +91,7 @@ : 'solid'; //if layout is outline or transparent if (layout === 'outline' || layout === 'transparent') { - button.classList.add('bd-solid', 'bd-thin'); + button.classList.add('b-solid', 'b-thin'); if (layout === 'outline') { button.classList.add('bg-white'); } else { @@ -101,23 +101,23 @@ button.style.color = color; button.style.borderColor = color; } else if (info) { - button.classList.add('bd-info', 'tx-info'); + button.classList.add('b-info', 'tx-info'); } else if (warning) { - button.classList.add('bd-warning', 'tx-warning'); + button.classList.add('b-warning', 'tx-warning'); } else if (success) { - button.classList.add('bd-success', 'tx-success'); + button.classList.add('b-success', 'tx-success'); } else if (error) { - button.classList.add('bd-error', 'tx-error'); + button.classList.add('b-error', 'tx-error'); } else if (muted) { - button.classList.add('bd-muted', 'tx-muted'); + button.classList.add('b-muted', 'tx-muted'); } else if (primary) { - button.classList.add('bd-primary', 'tx-primary'); + button.classList.add('b-primary', 'tx-primary'); } else if (secondary) { - button.classList.add('bd-secondary', 'tx-secondary'); + button.classList.add('b-secondary', 'tx-secondary'); } //it's solid } else { - button.classList.add('bd-0', 'tx-white'); + button.classList.add('b-0', 'tx-white'); if (color) { button.style.backgroundColor = color; } else if (info) { diff --git a/packages/temple-ui-src/src/components/format/color.tml b/packages/temple-ui-src/src/components/format/color.tml index 6e52978..e1deea4 100644 --- a/packages/temple-ui-src/src/components/format/color.tml +++ b/packages/temple-ui-src/src/components/format/color.tml @@ -12,7 +12,7 @@ this.classList.add('inline-block'); } //build box class list - const classList = [ 'inline-block', 'curved', 'bda-black' ]; + const classList = [ 'inline-block', 'curved', 'ba-black' ]; //determine box class size if (sm) { classList.push('w-8', 'h-8'); diff --git a/packages/temple-ui-src/src/components/format/country.tml b/packages/temple-ui-src/src/components/format/country.tml index 6b20fe0..2e5bfac 100644 --- a/packages/temple-ui-src/src/components/format/country.tml +++ b/packages/temple-ui-src/src/components/format/country.tml @@ -20,7 +20,7 @@ this.classList.add('inline-block'); } //build flag class list - const classList = [ 'inline-block', 'curved', 'bda-black' ]; + const classList = [ 'inline-block', 'curved', 'ba-black' ]; //determine flag class size if (sm) { classList.push('w-40'); diff --git a/packages/temple-ui-src/src/components/format/currency.tml b/packages/temple-ui-src/src/components/format/currency.tml index 91c184d..67a5605 100644 --- a/packages/temple-ui-src/src/components/format/currency.tml +++ b/packages/temple-ui-src/src/components/format/currency.tml @@ -24,7 +24,7 @@ this.classList.add('inline-block'); } //build flag class list - const classList = [ 'inline-block', 'curved', 'bda-black' ]; + const classList = [ 'inline-block', 'curved', 'ba-black' ]; //determine flag class size if (sm) { classList.push('w-40'); diff --git a/packages/temple-ui-src/src/components/intl.json b/packages/temple-ui-src/src/components/intl.json index 0ed4c64..c0ca403 100644 --- a/packages/temple-ui-src/src/components/intl.json +++ b/packages/temple-ui-src/src/components/intl.json @@ -120,10 +120,10 @@ "language": "en_US" }, { - "countryCode": "BD", + "countryCode": "b", "countryName": "Bangladesh", "currencyType": "fiat", - "currencyCode": "BDT", + "currencyCode": "bT", "currencyName": "Bangladeshi Taka", "currencyPlural": "Bangladeshi takas", "currencySymbol": "Tk", @@ -166,7 +166,7 @@ "currencyCode": "BHD", "currencyName": "Bahraini Dinar", "currencyPlural": "Bahraini dinars", - "currencySymbol": "BD", + "currencySymbol": "b", "language": "en_US" }, { diff --git a/packages/temple-ui-src/src/components/loader.tml b/packages/temple-ui-src/src/components/loader.tml index 299a66c..a4ec4bc 100644 --- a/packages/temple-ui-src/src/components/loader.tml +++ b/packages/temple-ui-src/src/components/loader.tml @@ -29,28 +29,28 @@ if (color) { icon.style.borderColor = color; } else if (info) { - icon.classList.add('bd-info'); + icon.classList.add('b-info'); } else if (warning) { - icon.classList.add('bd-warning'); + icon.classList.add('b-warning'); } else if (success) { - icon.classList.add('bd-success'); + icon.classList.add('b-success'); } else if (error) { - icon.classList.add('bd-error'); + icon.classList.add('b-error'); } else if (muted) { - icon.classList.add('bd-muted'); + icon.classList.add('b-muted'); } else if (primary) { - icon.classList.add('bd-primary'); + icon.classList.add('b-primary'); } else if (secondary) { - icon.classList.add('bd-secondary'); + icon.classList.add('b-secondary'); } if (slice > 0) { - icon.classList.add('bdr-transparent'); + icon.classList.add('br-transparent'); } if (slice > 1) { - icon.classList.add('bdb-transparent'); + icon.classList.add('bb-transparent'); } if (slice > 2) { - icon.classList.add('bdl-transparent'); + icon.classList.add('bl-transparent'); } {[ icon ]} \ No newline at end of file diff --git a/packages/temple-ui-src/src/components/notify.tml b/packages/temple-ui-src/src/components/notify.tml index e2fcbd0..01be798 100644 --- a/packages/temple-ui-src/src/components/notify.tml +++ b/packages/temple-ui-src/src/components/notify.tml @@ -31,7 +31,7 @@ 'w-calc-full-32', 'relative', 'p-16', 'mb-8', 'tx-white', 'scroll-hidden', 'curved', - 'wm-288' + 'mw-288' ); switch (type) { diff --git a/packages/temple-ui-src/src/components/table/col.tml b/packages/temple-ui-src/src/components/table/col.tml index dd5f5c4..649ed86 100644 --- a/packages/temple-ui-src/src/components/table/col.tml +++ b/packages/temple-ui-src/src/components/table/col.tml @@ -10,8 +10,8 @@ const children = this.originalChildren; this.classList.add( 'table-cell', 'py-16', 'px-12', - 'bdx-0', 'bdb-0', 'bdt-1', - 'bd-solid' + 'bx-0', 'bb-0', 'bt-1', + 'b-solid' ); if (nowrap) { this.classList.add('tx-nowrap'); diff --git a/packages/temple-web/src/components/api/ui.tml b/packages/temple-web/src/components/api/ui.tml index e80238a..1cd0ea1 100644 --- a/packages/temple-web/src/components/api/ui.tml +++ b/packages/temple-web/src/components/api/ui.tml @@ -37,34 +37,34 @@
- +
- + - + - + - - - - - - -
PropertyProperty ReturnsReturns DescriptionDescription
+ {key} + {prop.type} {prop.list ? '[]' :''} + {prop.type}{prop.list ? '[]' :''} + {key}( 0}>, @@ -80,25 +80,25 @@ ) + {prop.returns.type} {prop.returns.list ? '[]' :''} + {prop.returns.type}{prop.returns.list ? '[]' :''} {`on('${key}', (event: Event) => void)`} +

{prop.description}

diff --git a/packages/temple-web/src/components/html/aside.tml b/packages/temple-web/src/components/html/aside.tml index 1ffb02b..cadb037 100644 --- a/packages/temple-web/src/components/html/aside.tml +++ b/packages/temple-web/src/components/html/aside.tml @@ -2,13 +2,13 @@ Temple Logo -

+

Temple

- + \ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/compiler-api.dtml b/packages/temple-web/src/pages/docs/compiler-api.dtml index 3c0c75d..ea1bb96 100644 --- a/packages/temple-web/src/pages/docs/compiler-api.dtml +++ b/packages/temple-web/src/pages/docs/compiler-api.dtml @@ -2,9 +2,6 @@ - - - @@ -29,13 +26,13 @@ - + - - - +
+ +
-

+

{_('Compiler API')}

@@ -75,7 +72,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/component-publisher.dtml b/packages/temple-web/src/pages/docs/component-publisher.dtml index ea39945..4d91e74 100644 --- a/packages/temple-web/src/pages/docs/component-publisher.dtml +++ b/packages/temple-web/src/pages/docs/component-publisher.dtml @@ -2,9 +2,6 @@ - - - @@ -33,13 +30,13 @@ - + - - - +
+ +
-

+

{_('Component Publisher')}

@@ -73,7 +70,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/component-strategy.dtml b/packages/temple-web/src/pages/docs/component-strategy.dtml index b774461..67660cf 100644 --- a/packages/temple-web/src/pages/docs/component-strategy.dtml +++ b/packages/temple-web/src/pages/docs/component-strategy.dtml @@ -2,10 +2,6 @@ - - - - @@ -36,13 +32,13 @@ - + - - - +
+ + +
-

+

{_('Component Strategy')}

@@ -78,7 +74,7 @@ -

+

{_('Document')}

@@ -127,7 +123,7 @@
-

+

{_('Template')}

@@ -246,7 +242,7 @@
-

+

{_('Component')}

@@ -347,7 +343,7 @@ -

+

{_('Strategy 1: No Components')}

@@ -363,7 +359,7 @@
-

+

{_('Strategy 2: Shallow Components')}

@@ -509,7 +505,7 @@
-

+

{_('Strategy 3: Partial Styling')}

@@ -644,7 +640,7 @@
-

+

{_('Strategy 4: Encapulation')}

@@ -782,7 +778,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/developer-tools.dtml b/packages/temple-web/src/pages/docs/developer-tools.dtml index 02657ee..77cb568 100644 --- a/packages/temple-web/src/pages/docs/developer-tools.dtml +++ b/packages/temple-web/src/pages/docs/developer-tools.dtml @@ -2,9 +2,6 @@ - - - @@ -29,13 +26,13 @@ - + - - - +
+ +
-

+

{_('Developer Tools')}

@@ -132,7 +129,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/getting-started.dtml b/packages/temple-web/src/pages/docs/getting-started.dtml index e7a4a55..95ea992 100644 --- a/packages/temple-web/src/pages/docs/getting-started.dtml +++ b/packages/temple-web/src/pages/docs/getting-started.dtml @@ -2,10 +2,6 @@ - - - - @@ -37,11 +33,11 @@ - + - - - +
+ + +

{_('Getting Started')} @@ -79,7 +75,7 @@ npm init -y && npm install --save @ossph/temple && npm install --save-dev ts-node typescript @types/node - + Recommended: Download the Temple editor plugin at the -

+

{_('1. Add HTTP')}

@@ -158,7 +154,7 @@ file with the following code. - + Optional: You can also check your other files to make sure you are following along. @@ -166,10 +162,10 @@ -
+
-

+

{_('2. Add Developer Tools')}

@@ -421,10 +417,10 @@ -
+
-

+

{_('3. Add Cache Files')}

@@ -771,7 +767,7 @@ -

+

{_('4. Add TailwindCSS')}

@@ -794,7 +790,7 @@ you are using Tailwind. - + Warning: The caveat for using TailwindCSS, means that web components @@ -883,10 +879,10 @@ -
+
-

+

{_('5. Add ExpressJS')}

@@ -1161,10 +1157,10 @@ -
+
- +

\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/index.dtml b/packages/temple-web/src/pages/docs/index.dtml index 552f5f5..bf9fb71 100644 --- a/packages/temple-web/src/pages/docs/index.dtml +++ b/packages/temple-web/src/pages/docs/index.dtml @@ -2,9 +2,6 @@ - - - @@ -30,13 +27,13 @@ - + - - - +
+ +
-

+

{_('Documentation')}

@@ -63,9 +60,9 @@ JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options. - -
- {` + +
+ {` @@ -74,9 +71,9 @@

Hello {name}!

`} - +
-

Hello world!

+

{_('Hello world!')}
@@ -102,7 +99,7 @@ `} - {` + {` import { props } from '@ossph/temple'; export default class Hello extends TempleComponent { styles() { @@ -127,7 +124,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/markup-syntax.dtml b/packages/temple-web/src/pages/docs/markup-syntax.dtml index 8d57550..c772d4b 100644 --- a/packages/temple-web/src/pages/docs/markup-syntax.dtml +++ b/packages/temple-web/src/pages/docs/markup-syntax.dtml @@ -2,10 +2,6 @@ - - - - @@ -31,13 +27,13 @@ - + - - - +
+ + +
-

+

{_('Markup Syntax')}

@@ -91,7 +87,7 @@ -

+

{_('Imports')}

@@ -151,7 +147,7 @@ -

+

{_('Styles')}

@@ -212,7 +208,7 @@ -

+

{_('Scripts')}

@@ -269,7 +265,7 @@ -

+

{_('Markup')}

@@ -281,7 +277,7 @@ -

+

{_('Tag Names')}

@@ -354,7 +350,7 @@ - + Warning: Any markup auto corrected by browser will cause data syncing issues with Temple. @@ -368,7 +364,7 @@ -

+

{_('Attributes')}

@@ -454,7 +450,7 @@ -

+

{_('Conditionals')}

@@ -526,7 +522,7 @@ -

+

{_('Iterations')}

@@ -576,7 +572,7 @@ -

+

{_('Try/Catch')}

@@ -615,7 +611,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/single-page.dtml b/packages/temple-web/src/pages/docs/single-page.dtml index 5d9d5de..8ea18ae 100644 --- a/packages/temple-web/src/pages/docs/single-page.dtml +++ b/packages/temple-web/src/pages/docs/single-page.dtml @@ -2,9 +2,6 @@ - - - @@ -33,13 +30,13 @@ - + - - - +
+ +
-

+

{_('Single Page App')}

@@ -80,7 +77,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/state-management.dtml b/packages/temple-web/src/pages/docs/state-management.dtml index 87bde08..4626ac7 100644 --- a/packages/temple-web/src/pages/docs/state-management.dtml +++ b/packages/temple-web/src/pages/docs/state-management.dtml @@ -2,10 +2,6 @@ - - - - @@ -37,13 +33,13 @@ - + - - - +
+ + +
-

+

{_('State Management')}

@@ -69,7 +65,7 @@ -

+

{_('Props')}

@@ -84,7 +80,7 @@ -

+

{_('Signals')}

@@ -125,7 +121,7 @@ -

+

{_('Events')}

@@ -246,7 +242,7 @@ -

+

{_('Class Names')}

@@ -263,7 +259,7 @@ -

+

{_('Children')}

@@ -279,7 +275,7 @@ -

+

{_('Component')}

@@ -297,7 +293,7 @@ -

+

{_('Environment Variables')}

@@ -316,7 +312,7 @@ -

+

{_('this')}

@@ -374,7 +370,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/static-site.dtml b/packages/temple-web/src/pages/docs/static-site.dtml index 3b90e8c..88b1b7a 100644 --- a/packages/temple-web/src/pages/docs/static-site.dtml +++ b/packages/temple-web/src/pages/docs/static-site.dtml @@ -2,9 +2,6 @@ - - - @@ -33,13 +30,13 @@ - + - - - +
+ +
-

+

{_('Static Site Generator')}

@@ -62,7 +59,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/docs/template-engine.dtml b/packages/temple-web/src/pages/docs/template-engine.dtml index 28e3c91..e36375c 100644 --- a/packages/temple-web/src/pages/docs/template-engine.dtml +++ b/packages/temple-web/src/pages/docs/template-engine.dtml @@ -2,9 +2,6 @@ - - - @@ -33,13 +30,13 @@ - + - - - +
+ +
-

+

{_('Template Engine')}

@@ -60,7 +57,7 @@
- +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/index.dtml b/packages/temple-web/src/pages/index.dtml index bb53cdd..c79a530 100644 --- a/packages/temple-web/src/pages/index.dtml +++ b/packages/temple-web/src/pages/index.dtml @@ -1,8 +1,6 @@ - - @@ -26,10 +24,10 @@ - + - - +
+
Temple Logo

{_('Temple')}

@@ -51,7 +49,7 @@ {_('Read the Docs')}
-
+
Temple is a modern HTML markup language and a server first template engine with a built-in parser/compiler that @@ -78,9 +76,9 @@
    -
  • +
  • -

    +

    {_('Expressive Markup')}

    @@ -89,9 +87,9 @@
    • -
  • +
  • -

    +

    {_('Reactive Signals')}

    @@ -100,9 +98,9 @@
    • -
  • +
  • -

    +

    {_('Bare Metal')}

    @@ -113,8 +111,8 @@
-
-

+
+

{_('Server Setup')}

@@ -131,7 +129,7 @@ `} -

+

{_('Props')}

@@ -157,7 +155,7 @@ -

+

{_('Reactive Signals')}

@@ -184,7 +182,7 @@ -

+

{_('Components and Templates')}

@@ -200,7 +198,7 @@ Hello `} - {` + {` @@ -243,7 +241,7 @@
-

+

{_('Works With Popular Server Frameworks')}

@@ -312,8 +310,7 @@ {_('Read the Docs')}
-
- +

\ No newline at end of file diff --git a/packages/temple-web/src/pages/template-1.dtml b/packages/temple-web/src/pages/template-1.dtml index d7c30e9..2d1ff71 100644 --- a/packages/temple-web/src/pages/template-1.dtml +++ b/packages/temple-web/src/pages/template-1.dtml @@ -2,10 +2,6 @@ - - - - @@ -34,18 +30,18 @@ const description = _('Temple is a template engine that generates web components and support reactivity.'); const toggle = () => { - document.getElementsByTagName('panel-layout')[0].toggle('left'); + document.querySelector('panel-layout').toggle('left'); }; - + - - - +
+ + +
-

+

{_('Getting Started')}

@@ -106,7 +102,7 @@ -

+

{_('1. Add HTTP')}

@@ -134,7 +130,7 @@ `} -

+

{_('1. Add HTTP')}

@@ -148,9 +144,9 @@ {`function() {}`} - -
- {` + +
+ {` @@ -159,13 +155,15 @@

Hello {name}!

`} - -

Hello world!

+ +
+

{_('Hello world!')}

+
- + Recommended: Download the Temple editor plugin at the - +
\ No newline at end of file diff --git a/packages/temple-web/src/pages/tui/template-1.dtml b/packages/temple-web/src/pages/tui/template-1.dtml deleted file mode 100644 index 1bb4b68..0000000 --- a/packages/temple-web/src/pages/tui/template-1.dtml +++ /dev/null @@ -1,367 +0,0 @@ - - - - - - - - - - - - - - - - - - - - -
- - Tab 1 - - - Tab 2 - - - Tab 3 - -
-

Tab 1

-

Temple UI atomically generates CSS styles and provides out of box web components.

-
-
-

Tab 2

-

Temple UI atomically generates CSS styles and provides out of box web components.

-
-
-

Tab 3

-

Temple UI atomically generates CSS styles and provides out of box web components.

-
-
-

{_('Loaders')}

- - - - - - - - - -
- -
-

{_('Alerts')}

- - - Web Components Meets Atomic Styles. - - - - Web Components Meets Atomic Styles. - - - - Web Components Meets Atomic Styles. - - - - Web Components Meets Atomic Styles. - - - - - Web Components Meets Atomic Styles. - - - - Web Components Meets Atomic Styles. - - - - Web Components Meets Atomic Styles. - -
- -
-

{_('Badges')}

- - 999 - - - 999 - - - 999 - - - 999 - - - - 999 - - - 999 - - - 999 - -
- -
-

{_('Standard Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('Outline Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('Transparent Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('XS Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('SM Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('LG Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('XL Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('2XL Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('3XL Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('4XL Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - -

{_('5XL Buttons')}

- Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted - Info - Warning - Success - Error - Primary - Secondary - Muted -
-
- - - - \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/components/index.dtml b/packages/temple-web/src/pages/ui/components/index.dtml new file mode 100644 index 0000000..ea4d8d9 --- /dev/null +++ b/packages/temple-web/src/pages/ui/components/index.dtml @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

+ {_('Components')} +

+
+
+
+
Alert
+
+
+
+
Badge
+
+
+
+
Crumbs
+
+
+
+
Icon
+
+
+ +
+ + + \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/fields/index.dtml b/packages/temple-web/src/pages/ui/fields/index.dtml new file mode 100644 index 0000000..86b4df1 --- /dev/null +++ b/packages/temple-web/src/pages/ui/fields/index.dtml @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + +
+ +
+ +

+ {_('Fields')} +

+ +
+ + + \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/formats/index.dtml b/packages/temple-web/src/pages/ui/formats/index.dtml new file mode 100644 index 0000000..e6c36ea --- /dev/null +++ b/packages/temple-web/src/pages/ui/formats/index.dtml @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

+ {_('Formats')} +

+ +
+ + + \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/template-1.dtml b/packages/temple-web/src/pages/ui/template-1.dtml new file mode 100644 index 0000000..ee714b4 --- /dev/null +++ b/packages/temple-web/src/pages/ui/template-1.dtml @@ -0,0 +1,659 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ compiler.render('./page.tml') +
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
+ + + Name + This is the first and last name + + Age + Bio + Actions + + John Doe + 21 + + Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Duis laoreet lectus eget enim rhoncus, vel + volutpat eros tincidunt. In molestie nunc ut pulvinar + sollicitudin. + + + + + + + + + Jane Doe + 32 + + Vivamus ultricies urna eget dui iaculis tempor. Nam + efficitur molestie gravida. Duis iaculis interdum + augue a sagittis. + + + + + + + + + Jack Doe + 27 + + Donec ipsum dolor, condimentum in justo quis, + dignissim porttitor magna. Nunc porttitor mi a turpis + lacinia facilisis sed tempus urna. Nulla consectetur + libero at tortor tincidunt, id accumsan dui ornare. + + + + + + + + + John Doe + 21 + + Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Duis laoreet lectus eget enim rhoncus, vel + volutpat eros tincidunt. In molestie nunc ut pulvinar + sollicitudin. + + + + + + + + + Jane Doe + 32 + + Vivamus ultricies urna eget dui iaculis tempor. Nam + efficitur molestie gravida. Duis iaculis interdum + augue a sagittis. + + + + + + + + + Jack Doe + 27 + + Donec ipsum dolor, condimentum in justo quis, + dignissim porttitor magna. Nunc porttitor mi a turpis + lacinia facilisis sed tempus urna. Nulla consectetur + libero at tortor tincidunt, id accumsan dui ornare. + + + + + + + + Name + Age + Bio + Actions + + +
+ +
+
+ + + + + + + + { + 'I am Ironman.' + } + + Submit +
+
+ +
+

{_('Tabs')}

+ + Tab 1 + + + Tab 2 + + + Tab 3 + +
+

Tab 1

+

Temple UI atomically generates CSS styles and provides out of box web components.

+
+
+

Tab 2

+

Temple UI atomically generates CSS styles and provides out of box web components.

+
+
+

Tab 3

+

Temple UI atomically generates CSS styles and provides out of box web components.

+
+
+ +
+

{_('Loaders')}

+ + + + + + + + + +
+ +
+

{_('Alerts')}

+ + + Web Components Meets Atomic Styles. + + + + Web Components Meets Atomic Styles. + + + + Web Components Meets Atomic Styles. + + + + Web Components Meets Atomic Styles. + + + + + Web Components Meets Atomic Styles. + + + + Web Components Meets Atomic Styles. + + + + Web Components Meets Atomic Styles. + +
+ +
+

{_('Badges')}

+ + 999 + + + 999 + + + 999 + + + 999 + + + + 999 + + + 999 + + + 999 + +
+ +
+

{_('XS Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('SM Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('MD Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('LG Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('XL Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('2XL Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('3XL Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('4XL Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + +

{_('5XL Buttons')}

+ Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted + Info + Warning + Success + Error + Primary + Secondary + Muted +
+
+
+ + + + \ No newline at end of file