diff --git a/dist/client.d.ts b/dist/client.d.ts new file mode 100644 index 0000000..2c53cf4 --- /dev/null +++ b/dist/client.d.ts @@ -0,0 +1,3 @@ +import { Module } from 'snabbdom/modules/module'; +export declare const cssModule: Module; +export default cssModule; diff --git a/dist/client.js b/dist/client.js new file mode 100644 index 0000000..20f712d --- /dev/null +++ b/dist/client.js @@ -0,0 +1,14 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var utils_1 = require("./utils"); +var updateDOM = function (oldNode, newNode) { + if (newNode.elm) { + var elm_1 = newNode.elm; + utils_1.updateVNode(newNode, function (name, value) { return elm_1.setAttribute(name, value); }); + } +}; +exports.cssModule = { + create: updateDOM, + update: updateDOM, +}; +exports.default = exports.cssModule; diff --git a/dist/server.d.ts b/dist/server.d.ts new file mode 100644 index 0000000..3d4370e --- /dev/null +++ b/dist/server.d.ts @@ -0,0 +1,3 @@ +import { VNode } from 'snabbdom/vnode'; +export declare const serverSideCssModule: (node: VNode, attributes: Map) => void; +export declare const collectStyles: (node: VNode) => string; diff --git a/dist/server.js b/dist/server.js new file mode 100644 index 0000000..c1cff29 --- /dev/null +++ b/dist/server.js @@ -0,0 +1,23 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var typestyle_1 = require("typestyle"); +var utils_1 = require("./utils"); +exports.serverSideCssModule = function (node, attributes) { + return utils_1.updateVNode(node, function (name, value) { return attributes.set(name, value); }); +}; +exports.collectStyles = function (node) { + var instance = typestyle_1.createTypeStyle(); + traverseVNode(node, instance); + return instance.getStyles(); +}; +var traverseVNode = function (node, instance) { + if (utils_1.isVNode(node)) { + var data = node.data; + if (data.css) { + instance.style(data.css); + } + if (node.children) { + node.children.forEach(function (child) { return traverseVNode(child, instance); }); + } + } +}; diff --git a/dist/snabbdom-typestyle.d.ts b/dist/snabbdom-typestyle.d.ts new file mode 100644 index 0000000..94aceb9 --- /dev/null +++ b/dist/snabbdom-typestyle.d.ts @@ -0,0 +1,4 @@ +import cssModule from './client'; +export * from './types'; +export * from './server'; +export default cssModule; diff --git a/dist/snabbdom-typestyle.js b/dist/snabbdom-typestyle.js new file mode 100644 index 0000000..a0184e1 --- /dev/null +++ b/dist/snabbdom-typestyle.js @@ -0,0 +1,8 @@ +"use strict"; +function __export(m) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} +Object.defineProperty(exports, "__esModule", { value: true }); +var client_1 = require("./client"); +__export(require("./server")); +exports.default = client_1.default; diff --git a/dist/types.d.ts b/dist/types.d.ts new file mode 100644 index 0000000..802e519 --- /dev/null +++ b/dist/types.d.ts @@ -0,0 +1,6 @@ +import { VNodeData } from 'snabbdom/vnode'; +import { types } from 'typestyle'; +export interface StyledVNodeData extends VNodeData { + css?: types.NestedCSSProperties; +} +export declare type Style = types.NestedCSSProperties; diff --git a/dist/types.js b/dist/types.js new file mode 100644 index 0000000..c8ad2e5 --- /dev/null +++ b/dist/types.js @@ -0,0 +1,2 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/dist/utils.d.ts b/dist/utils.d.ts new file mode 100644 index 0000000..569a425 --- /dev/null +++ b/dist/utils.d.ts @@ -0,0 +1,3 @@ +import { VNode } from 'snabbdom/vnode'; +export declare const isVNode: (vNode: string | VNode) => vNode is VNode; +export declare const updateVNode: (node: VNode, attributeAccessor: (attribute: string, className: string) => void) => void; diff --git a/dist/utils.js b/dist/utils.js new file mode 100644 index 0000000..0e619ef --- /dev/null +++ b/dist/utils.js @@ -0,0 +1,16 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var typestyle_1 = require("typestyle"); +exports.isVNode = function (vNode) { + return vNode.length === undefined; +}; +exports.updateVNode = function (node, attributeAccessor) { + var data = node.data; + if (data.css) { + data.props = data.props || {}; + var styleClass = typestyle_1.style(data.css); + var oldClassName = data.props.className || ''; + var newClassName = (oldClassName + " " + styleClass).trim(); + attributeAccessor('class', newClassName); + } +}; diff --git a/src/client.ts b/src/client.ts new file mode 100644 index 0000000..6a35bd6 --- /dev/null +++ b/src/client.ts @@ -0,0 +1,17 @@ +import { Module } from 'snabbdom/modules/module'; +import { VNode } from 'snabbdom/vnode'; +import { updateVNode } from './utils'; + +const updateDOM = (oldNode: VNode, newNode: VNode): void => { + if (newNode.elm) { + const elm: Element = newNode.elm as Element; + updateVNode(newNode, (name, value) => elm.setAttribute(name, value)); + } +}; + +export const cssModule = { + create: updateDOM, + update: updateDOM, +} as Module; + +export default cssModule; diff --git a/src/css.ts b/src/css.ts deleted file mode 100644 index 420a9e0..0000000 --- a/src/css.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { Attrs } from 'snabbdom/modules/attributes'; -import { Module } from 'snabbdom/modules/module'; -import { VNode, VNodeData } from 'snabbdom/vnode'; -import { createTypeStyle, getStyles, style, types } from 'typestyle'; -import { TypeStyle } from 'typestyle/lib/internal/typestyle'; - -/* - Types - */ - -export interface StyledVNodeData extends VNodeData { - css?: types.NestedCSSProperties; -} - -export type Style = types.NestedCSSProperties; - -/* - Utilities - */ - -const isVNode = (vNode: string | VNode): vNode is VNode => { - return (vNode as string).length === undefined; -}; - -const updateVNode = (node: VNode, attributeAccessor: (attribute: string, className: string) => void): void => { - const data: StyledVNodeData = node.data as StyledVNodeData; - - if (data.css) { - data.props = data.props || {}; - - const styleClass = style(data.css); - const oldClassName = data.props.className || ''; - const newClassName = `${oldClassName} ${styleClass}`.trim(); - - attributeAccessor('class', newClassName); - } -}; - -/* - Client-side - */ - -const updateDOM = (oldNode: VNode, newNode: VNode): void => { - if (newNode.elm) { - const elm: Element = newNode.elm as Element; - updateVNode(newNode, (name, value) => elm.setAttribute(name, value)); - } -}; - -export const cssModule = { - create: updateDOM, - update: updateDOM, -} as Module; - -export default cssModule; - -/* - Server-side - */ - -export const serverSideCssModule = (node: VNode, attributes: Map): void => - updateVNode(node, (name, value) => attributes.set(name, value)); - -export const collectStyles = (node: VNode): string => { - const instance = createTypeStyle(); - traverseVNode(node, instance); - return instance.getStyles(); -}; - -const traverseVNode = (node: string | VNode, instance: TypeStyle) => { - if (isVNode(node)) { - const data: StyledVNodeData = node.data as StyledVNodeData; - - if (data.css) { - instance.style(data.css); - } - - if (node.children) { - node.children.forEach((child) => traverseVNode(child, instance)); - } - } -}; diff --git a/src/server.ts b/src/server.ts new file mode 100644 index 0000000..85d99d5 --- /dev/null +++ b/src/server.ts @@ -0,0 +1,29 @@ +import { VNode } from 'snabbdom/vnode'; +import { createTypeStyle, getStyles, style } from 'typestyle'; +import { TypeStyle } from 'typestyle/lib/internal/typestyle'; + +import { StyledVNodeData } from './types'; +import { isVNode, updateVNode } from './utils'; + +export const serverSideCssModule = (node: VNode, attributes: Map): void => + updateVNode(node, (name, value) => attributes.set(name, value)); + +export const collectStyles = (node: VNode): string => { + const instance = createTypeStyle(); + traverseVNode(node, instance); + return instance.getStyles(); +}; + +const traverseVNode = (node: string | VNode, instance: TypeStyle) => { + if (isVNode(node)) { + const data: StyledVNodeData = node.data as StyledVNodeData; + + if (data.css) { + instance.style(data.css); + } + + if (node.children) { + node.children.forEach((child) => traverseVNode(child, instance)); + } + } +}; diff --git a/src/snabbdom-typestyle.ts b/src/snabbdom-typestyle.ts new file mode 100644 index 0000000..404df8b --- /dev/null +++ b/src/snabbdom-typestyle.ts @@ -0,0 +1,6 @@ +import cssModule from './client'; + +export * from './types'; +export * from './server'; + +export default cssModule; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..535df4f --- /dev/null +++ b/src/types.ts @@ -0,0 +1,8 @@ +import { VNodeData } from 'snabbdom/vnode'; +import { types } from 'typestyle'; + +export interface StyledVNodeData extends VNodeData { + css?: types.NestedCSSProperties; +} + +export type Style = types.NestedCSSProperties; diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..57f3e30 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,22 @@ +import { VNode } from 'snabbdom/vnode'; +import { style } from 'typestyle'; + +import { StyledVNodeData } from './types'; + +export const isVNode = (vNode: string | VNode): vNode is VNode => { + return (vNode as string).length === undefined; +}; + +export const updateVNode = (node: VNode, attributeAccessor: (attribute: string, className: string) => void): void => { + const data: StyledVNodeData = node.data as StyledVNodeData; + + if (data.css) { + data.props = data.props || {}; + + const styleClass = style(data.css); + const oldClassName = data.props.className || ''; + const newClassName = `${oldClassName} ${styleClass}`.trim(); + + attributeAccessor('class', newClassName); + } +}; diff --git a/tsconfig.json b/tsconfig.json index 176e43d..ec54d9a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,6 +11,6 @@ ] }, "files": [ - "src/css.ts" + "src/snabbdom-typestyle.ts" ] } \ No newline at end of file