jj 0.1.0 → 2.0.0

package/CSS.js

@@ -1,145 +0,0 @@
-import { mapKeyVal, camel2kebab, nl, ind, isObj, isNum, isStr, isArr, qut } from './util.js'
-import { isDim } from './unit.js'
-
-function isAtRule(selectorTxt) {
-    return selectorTxt.trimLeft().startsWith('@')
-}
-
-function toValue(val) {
-    if (isStr(val)) {
-        if (val.trim() === '') {
-            return qut(val)
-        }
-        return val
-    }
-    if (isNum(val)) {
-        return String(val)
-    }
-    if (isDim(val)) {
-        return String(val)
-    } else if (isArr(val)) {
-        return val.join(' ')
-    }
-}
-
-function extractRules(selectorTxt, bodyObj) {
-    const baseRule = new SimpleRule(selectorTxt)
-    const ownProps = baseRule.bodyObj
-    const nestedRules = [baseRule]
-    mapKeyVal(bodyObj, (key, val) => {
-        const v = toValue(val)
-        if (v !== undefined) {
-            ownProps[key] = v
-        } else if (isAtRule(key)) {
-            nestedRules.push(new WrapperRule(key, { [selectorTxt]: val }))
-        } else {
-            let nestedSelectorTxt = key.replace(/&/g, selectorTxt)
-            if (nestedSelectorTxt === key) {
-                // No & was present, so the replacement didn't do anything. Nest the selectors
-                nestedSelectorTxt = selectorTxt + ' ' + key
-            }
-            nestedRules.push(new NestedRule(nestedSelectorTxt, val))
-        }
-    })
-    return nestedRules
-}
-
-function propVal(indentation, prop, val) {
-    const colon = indentation < 0 ? ':' : ': '
-    return camel2kebab(prop)
-        + colon
-        + toValue(val)
-        + ';'
-}
-
-class SimpleRule {
-    constructor(selectorTxt, bodyObj = {}) {
-        this.selectorTxt = selectorTxt
-        this.bodyObj = bodyObj
-    }
-
-    get isEmpty() {
-        return Object.keys(this.bodyObj).length === 0
-    }
-
-    toString(indentation = 0) {
-        if (this.isEmpty) {
-            return indentation >= 0 ? ind(indentation) + `/* ${this.selectorTxt} {} */`: ''
-        }
-        let ret = ind(indentation) + this.selectorTxt
-        if (indentation >= 0) {
-            ret += ' '
-        }
-        ret += '{' + nl(indentation)
-        const space = ind(indentation, 1)
-        ret += mapKeyVal(this.bodyObj, (key, val) => space + propVal(indentation, key, val))
-            .join(nl(indentation))
-        if (indentation >= 0) {
-            ret += nl(indentation) + ind(indentation)
-        }
-        ret += '}'
-        return ret
-    }
-}
-
-class NestedRule {
-    constructor(selectorTxt, bodyObj) {
-        this.selectorTxt = selectorTxt
-        this.bodyObj = bodyObj
-    }
-
-    toString(indentation = 0) {
-        if (isObj(this.bodyObj)) {
-            return extractRules(this.selectorTxt, this.bodyObj)
-                .map(rule => rule.toString(indentation))
-                .join(nl(indentation))
-        }
-        const v = toValue(this.bodyObj)
-        if (v !== undefined) {
-            return ind(indentation) + propVal(indentation, this.selectorTxt, v)
-        }
-        return ind(indentation) + this.selectorTxt
-    }
-}
-
-class WrapperRule {
-    constructor(selectorTxt, ruleSet) {
-        this.selectorTxt = selectorTxt
-        this.ruleSet = ruleSet
-    }
-
-    toString(indentation = 0) {
-        let ret = ind(indentation) + this.selectorTxt
-        if (isObj(this.ruleSet)) {
-            const childIndentation = indentation >= 0 ? indentation + 1 : -1
-            if (indentation >= 0) {
-                ret += ' '
-            }
-            ret += '{' + nl(indentation)
-            ret += objToRulesArr(this.ruleSet)
-                .map(rule => rule.toString(childIndentation))
-                .join(nl(indentation))
-            ret += nl(indentation)
-            ret += ind(indentation) + '}'
-        } else {
-            ret += ';'
-        }
-        return ret
-    }
-}
-
-export function objToRulesArr(obj) {
-    if (!isObj(obj)){
-        if (isStr(obj)) {
-            obj = { [obj]: null }
-        } else {
-            throw new TypeError(`Invalid style descriptor: ${obj}`)
-        }
-    }
-    return mapKeyVal(obj, (selectorTxt, bodyObj) => {
-        if (isAtRule(selectorTxt)) {
-            return new WrapperRule(selectorTxt, bodyObj)
-        }
-        return new NestedRule(selectorTxt, bodyObj)
-    })
-}

package/Router.js

@@ -1,89 +0,0 @@
-import { win } from './win.js'
-import { isFn, isStr, isObj } from './util.js'
-
-function match(regexp, pathname) {
-    if(isStr(regexp)) {
-        console.log('boo', regexp, pathname)
-        return regexp === pathname
-    }
-    if (regexp instanceof RegExp) {
-        const parseResult = pathname.match(regexp)
-        return parseResult || false
-    } 
-    throw new TypeError(`Invalid route regexp: ${regexp}`)
-}
-
-const rootRouterMap = new WeakMap()
-
-class Router {
-    constructor(root) {
-        if (!isObj(root) || !isFn(root.run)) {
-            throw new Error(`Root must have a run method but got ${root}`)
-        }
-        this.routes = []
-        this.root = root
-        this.isMatched = false
-        rootRouterMap.set(root, this)
-
-        const matchThis = (state) => this.runMatches(state)
-        win.on('popstate', matchThis).on('hashchange', matchThis)
-    }
-
-    addRoute(regexp, handler) {
-        if (isFn(this.defRouteHandler)) {
-            throw new Error(`Cannot add a route after the default route is set`)
-        }
-        if (!isFn(handler)) {
-            throw new TypeError(`Expected a route handler function but got ${handler}`)
-        }
-        const newRoute = { regexp, handler }
-        this.routes.push(newRoute)
-        if (!this.isMatched) {
-            this._runRoute(undefined, newRoute)
-        }
-        return this
-    }
-
-    addDefRoute(handler) {
-        if (isFn(this.defRouteHandler)) {
-            throw new Error(`There is already a default route handler`)
-        }
-        if (!isFn(handler)) {
-            throw new TypeError(`Expected a default route handler function but got ${handler}`)
-        }
-        this.defRouteHandler = handler
-        if (!this.isMatched) {
-            this._runDefRoute()
-        }
-        return this
-    }
-
-    _runRoute(state, { regexp, handler}, pathname  = window.location.pathname) {
-        const matchResult = match(regexp, pathname)
-        if (matchResult) {
-            this.isMatched = true
-            this.root.run(handler, state, matchResult)
-        }
-        return !!matchResult
-    }
-
-    _runDefRoute() {
-        this.root.run(this.defRouteHandler)
-        return this
-    }
-
-    runMatches(state, pathname  = window.location.pathname) {
-        const someRouteMatched = this.routes.some(route => this._runRoute(state, route, pathname))
-        if (!someRouteMatched) {
-            return this._runDefRoute()
-        }
-        return this
-    }
-}
-
-export function router(root) {
-    if (!isObj(root) || !isFn(root.run)) {
-        throw new TypeError(`root should be a Tag instance. Got ${root}`)
-    }
-    return rootRouterMap.get(root) || new Router(root)
-}

package/Selector.js

@@ -1,175 +0,0 @@
-import { sqBra, qut, alias, rnd, mapKeyVal } from './util.js'
-
-class Selector {
-    constructor(selector = '') {
-        this.selector = selector
-    }
-
-    toString() {
-        return this.selector
-    }
-
-    css(ruleObj) {
-        return { [this.selector]: ruleObj }
-    }
-
-    clone() {
-        return new Selector(this.selector)
-    }
-
-    append(...str) {
-        if (str.length) {
-            this.selector += str.map(s => isSel(s) ? s.selector : s).join('')
-        }
-        return this
-    }
-
-    at(str) {
-        return this.append('@', str)
-    }
-
-    get _() {
-        return this.append(' ')
-    }
-
-    // [attribute]	[target]	Selects all elements with a target attribute
-    // [attribute=value]	[target=_blank]	Selects all elements with target="_blank"
-    attr(attrName, attrValue) {
-        return attrValue === undefined ?
-            this.append(sqBra(attrName)) :
-            this.append(sqBra(attrName, '=', qut(attrValue)))
-    }
-
-    // [attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
-    attrValArrContains(attrName, attrValue) {
-        return this.append(sqBra(attrName, '~=', qut(attrValue)))
-    }
-
-    // [attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
-    attrValStartsWith(attrName, attrValue) {
-        return this.append(sqBra(attrName, '^=', qut(attrValue)))
-    }
-
-    // [attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
-    attrValEndsWith(attrName, attrValue) {
-        return this.append(sqBra(attrName, '$=', qut(attrValue)))
-    }
-
-    // [attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
-    attrValContains(attrName, attrValue) {
-        return this.append(sqBra(attrName, '*=', qut(attrValue)))
-    }
-
-    class(...classNames) {
-        classNames.forEach(c => this.append('.', c))
-        return this
-    }
-
-    BEM(block, element, modifier) {
-        this.B(block)
-        if (element !== undefined) {
-            this.E(element)            
-        }
-        if (modifier !== undefined) {
-            this.M(modifier)
-        }
-        return this
-    }
-
-    E(element) {
-        return this.append('__', element)
-    }
-
-    M(modifier) {
-        return this.append('--', modifier)
-    }
-
-    id(idString) {
-        return this.append('#', idString)
-    }
-
-    pClass(pseudo) {
-        return this.append(':', pseudo)
-    }
-
-    pEl(pseudo) {
-        return this.append('::', pseudo)
-    }
-
-    par(...str) {
-        return this.append('(', ...str, ')')
-    }
-
-    prop(prop, val) {
-        return this.par(prop, ':', val)
-    }
-
-    nthChild(str) {
-        return this.pClass(`nth-child(${str})`)
-    }
-
-    firstChild() {
-        return this.pClass(`first-child`)
-    }
-
-    rnd(prefix = '') {
-        return this.append(rnd(prefix))
-    }
-
-    [Symbol.toPrimitive](hint) {
-        if (hint === 'string') {
-            return this.toString()
-        }
-        return this.value
-    }
-}
-
-// B, E, M are for Block Element Modifier: http://getbem.com/introduction/
-alias(Selector, {
-    class: 'B',
-    append: ['add', 'el', 'tag', 'com', 'cond', 'star', 'all', 'sel', 'concat'],
-})
-
-const shortHands = {
-    [Symbol.toPrimitive]: 'toString',
-    '>': ['gt', 'parentOf'],
-    '*': ['star', 'all'],
-    '~': ['tilde', 'precedes'],
-    '+': ['plus', 'followedBy'],
-    ',': ['comma', 'or'],
-    // TODO: there's :not() pseudo-class as well and that one takes a selector
-    'not': ['not'],
-    'only': ['only'],
-    'and': ['and'],
-}
-
-mapKeyVal(shortHands, (str, vals) => {
-    vals.forEach(v => {
-        Selector.prototype[v] = function () {
-            return this.append(str)
-        }
-    })
-})
-
-export function isSel(v) {
-    return v instanceof Selector
-}
-
-function _sel(param) {
-    if (isSel(param)) {
-        return param
-    }
-    return new Selector(param)
-}
-
-export const sel = new Proxy(_sel, {
-    get(_sel, prop) {
-        const selector = new Selector()
-        if (prop in selector) {
-            return selector[prop]
-        } else {
-            selector.append(prop)
-            return selector
-        }
-    }
-})