packages/fela-native/src/index.js
/* eslint-disable import/no-unresolved, import/extensions */
import { StyleSheet } from 'react-native'
import { arrayEach } from 'fast-loops'
import { processStyleWithPlugins, RULE_TYPE, CLEAR_TYPE } from 'fela-utils'
export function createRenderer(config = {}) {
let renderer = {
listeners: [],
cache: {},
plugins: config.plugins || [],
isNativeRenderer: true,
clear() {
renderer.cache = {}
renderer._emitChange({
type: CLEAR_TYPE,
})
},
subscribe(callback) {
renderer.listeners.push(callback)
return {
unsubscribe: () =>
renderer.listeners.splice(renderer.listeners.indexOf(callback), 1),
}
},
renderRule(rule, props = {}) {
const processedStyle = processStyleWithPlugins(
renderer,
rule(props, renderer),
RULE_TYPE,
props
)
const reference = JSON.stringify(processedStyle)
if (!renderer.cache.hasOwnProperty(reference)) {
renderer.cache[reference] = StyleSheet.create({
style: processedStyle,
})
renderer._emitChange({
type: RULE_TYPE,
style: processedStyle,
})
}
return renderer.cache[reference].style
},
_emitChange(change) {
arrayEach(renderer.listeners, (listener) => listener(change))
},
}
if (config.enhancers) {
arrayEach(config.enhancers, (enhancer) => {
renderer = enhancer(renderer)
})
}
return renderer
}