dynamically load .style.js files; move the files closer to related components
This commit is contained in:
parent
7c77809ff9
commit
3e198526e6
12 changed files with 57 additions and 62 deletions
|
|
@ -7,56 +7,25 @@ import {
|
|||
relativeLuminance
|
||||
} from '../color_convert/color_convert.js'
|
||||
|
||||
import Root from 'src/components/root.style.js'
|
||||
import TopBar from 'src/components/top_bar.style.js'
|
||||
import Underlay from 'src/components/underlay.style.js'
|
||||
import Popover from 'src/components/popover.style.js'
|
||||
import Modals from 'src/components/modals.style.js'
|
||||
import MenuItem from 'src/components/menu_item.style.js'
|
||||
import Panel from 'src/components/panel.style.js'
|
||||
import PanelHeader from 'src/components/panel_header.style.js'
|
||||
import Button from 'src/components/button.style.js'
|
||||
import ButtonUnstyled from 'src/components/button_unstyled.style.js'
|
||||
import Input from 'src/components/input.style.js'
|
||||
import Text from 'src/components/text.style.js'
|
||||
import FunText from 'src/components/fun_text.style.js'
|
||||
import Link from 'src/components/link.style.js'
|
||||
import Icon from 'src/components/icon.style.js'
|
||||
import Border from 'src/components/border.style.js'
|
||||
import Post from 'src/components/post.style.js'
|
||||
import Notification from 'src/components/notification.style.js'
|
||||
import RichContent from 'src/components/rich_content.style.js'
|
||||
import Avatar from 'src/components/avatar.style.js'
|
||||
import Badge from 'src/components/badge.style.js'
|
||||
import Alert from 'src/components/alert.style.js'
|
||||
|
||||
const DEBUG = false
|
||||
|
||||
// Ensuring the order of components
|
||||
const components = {
|
||||
Root,
|
||||
Text,
|
||||
FunText,
|
||||
Link,
|
||||
Icon,
|
||||
Border,
|
||||
Underlay,
|
||||
Modals,
|
||||
Popover,
|
||||
MenuItem,
|
||||
Panel,
|
||||
PanelHeader,
|
||||
TopBar,
|
||||
Button,
|
||||
ButtonUnstyled,
|
||||
Input,
|
||||
Post,
|
||||
Notification,
|
||||
RichContent,
|
||||
Avatar,
|
||||
Alert,
|
||||
Badge
|
||||
Root: null,
|
||||
Text: null,
|
||||
FunText: null,
|
||||
Link: null,
|
||||
Icon: null,
|
||||
Border: null
|
||||
}
|
||||
|
||||
// Loading all style.js[on] files dynamically
|
||||
const componentsContext = require.context('src', true, /\.style.js(on)?$/)
|
||||
componentsContext.keys().forEach(key => {
|
||||
const component = componentsContext(key).default
|
||||
components[component.name] = component
|
||||
})
|
||||
|
||||
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
|
||||
// into an array [item2, item3] for iterating
|
||||
const unroll = (item) => {
|
||||
|
|
@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
|
|||
// Normalizing states and variants to always include "normal"
|
||||
const states = { normal: '', ...originalStates }
|
||||
const variants = { normal: '', ...originalVariants }
|
||||
const innerComponents = (validInnerComponents).map(name => components[name])
|
||||
const innerComponents = (validInnerComponents).map(name => {
|
||||
const result = components[name]
|
||||
if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
|
||||
return result
|
||||
})
|
||||
|
||||
// Optimization: we only really need combinations without "normal" because all states implicitly have it
|
||||
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue