Merge pull request #45 from josefaidt/next

.gitignore

@@ -6,3 +6,4 @@ node_modules
 /lib
 
 .vercel
+coverage

README.md

@@ -194,6 +194,29 @@ Described below is the pattern used for accessing `theme` context to create your
 </ThemeWrapper>
 ```
 
+## Actions
+
+### use:theme
+
+```svelte
+<script>
+  import { theme } from 'svelte-themer/use'
+  export let myTheme = {
+    text: 'red',
+  }
+</script>
+
+<div use:theme="{myTheme}">
+  <p>Hello, World!</p>
+</div>
+
+<style>
+  p {
+    color: var(--text);
+  }
+</style>
+```
+
 ## Contributing
 
 Refer to the [contributing guidelines](CONTRIBUTING.md).

components/ThemeWrapper.svelte

@@ -15,7 +15,7 @@
   import { onMount, afterUpdate, setContext } from 'svelte'
   import { presets } from './presets'
   import toggle from '../support/toggle'
-  import { createCSS } from '../support/css'
+  import { createCSSTemplate } from '../support/css'
   import {
     currentThemeName,
     currentThemeObject,
@@ -63,12 +63,13 @@
 
   themesStore.set(themes)
   const [fallback] = Object.keys(themes)
-  if (!Object.keys(themes).includes($currentThemeName))
+  if (!Object.keys(themes).includes($currentThemeName)) {
     currentThemeName.set(fallback)
+  }
   $: currentThemeObject.set(themes[$currentThemeName])
 
   // create CSS
-  const style = createCSS(prefix, base, themes)
+  const style = createCSSTemplate(prefix, base, themes)
 
   setContext(CONTEXT_KEY, {
     current: currentThemeName,

components/index.js

@@ -1,2 +1,3 @@
 export { default as ThemeWrapper } from './ThemeWrapper.svelte'
 export { default as ThemeToggle } from './ThemeToggle.svelte'
+export { presets } from './presets.js'

components/use.js

@@ -0,0 +1,31 @@
+import { createCSSVariableCollection } from '../support/css'
+
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {Object.<string, string|number>} theme
+ * @returns
+ */
+export async function theme(node, theme) {
+  /**
+   *
+   * @param {string} name
+   * @param {string} value
+   * @returns {void}
+   */
+  function setProperty(name, value) {
+    if (!node.style && node.document?.documentElement) {
+      node.document.documentElement.style.setProperty(name, value)
+      return
+    }
+    node.style.setProperty(name, value)
+    return
+  }
+
+  const variables = createCSSVariableCollection(theme)
+  for (let [name, value] of variables) {
+    setProperty(name, value)
+  }
+
+  return {}
+}

docs/src/App.svelte

@@ -33,13 +33,13 @@
   <meta property="og:url" content="{url}" />
   <meta property="og:title" content="{title}" />
   <meta property="og:description" content="{description}" />
-  <meta property="og:image" content="/favicon.png" />
+  <meta property="og:image" content="/favicon.ico" />
 
   <meta name="twitter:card" content="summary" />
   <meta name="twitter:creator" content="{author}" />
   <meta name="twitter:title" content="{title}" />
   <meta name="twitter:description" content="{description}" />
-  <meta name="twitter:image" content="/favicon.png" />
+  <meta name="twitter:image" content="/favicon.ico" />
 </svelte:head>
 
 <ThemeWrapper base="{base}">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-themer",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.5.3-next.1",
   "homepage": "https://svelte-themer.vercel.app",
   "license": "MIT",
   "repository": {
@@ -16,7 +16,8 @@
     },
     "./package.json": "./package.json",
     "./components": "./components/index.js",
-    "./store": "./support/store.js"
+    "./store": "./support/store.js",
+    "./use": "./components/use.js"
   },
   "files": [
     "components",

support/css.js

@@ -53,14 +53,30 @@ export function createCSSVariableOverride({
   return `${initialVariableName}: var(${themeVariableName});`
 }
 
+/**
+ *
+ * @param {object} config
+ * @param {Object} options
+ * @param {string} options.prefix
+ * @returns {[CSSVariableName, <string,CSSVariableName>]}
+ */
+export function createCSSVariableCollection(config, { prefix } = {}) {
+  const variablePrefix = prefix ? `--${prefix}` : '-'
+  const processedConfig = processConfig(config)
+  const variables = Object.entries(processedConfig).map(([prop, value]) => {
+    return [createCSSVariableName({ variablePrefix, prop }), value]
+  })
+  return variables
+}
+
 /**
  * Create CSS template
- * @name setCSS
+ * @name createCSSTemplate
  * @param {string} prefix - CSS variable prefix
  * @param {Object[]} themes - themes array
  * @returns {string} CSS template
  */
-export function createCSS(prefix, base = {}) {
+export function createCSSTemplate(prefix, base = {}) {
   const variablePrefix = prefix ? `--${prefix}` : '-'
 
   const themes = get(themesStore)
@@ -125,7 +141,7 @@ export function createCSS(prefix, base = {}) {
       :root {
         ${rootCSSVariables
           .map(vars => createCSSVariableStatement(...vars))
-          .join('\n\t')}
+          .join('')}
       }
 
       ${themeCSSContent.join('')}

test/support.js

@@ -0,0 +1,11 @@
+export function render(Component, props = {}) {
+  const host = document.createElement('div')
+  host.setAttribute('id', 'host')
+  document.body.appendChild(host)
+  const instance = new Component({ target: host, props })
+  return instance
+}
+
+export function getByTestId(id) {
+  return document.querySelector(`[data-testid="${id}"]`)
+}

test/use.test.js

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import UseComponent from './use.test.svelte'
+import { render as _render, getByTestId } from './support.js'
+
+function render(props = {}) {
+  return _render(UseComponent, props)
+}
+
+describe('Theme Action', () => {
+  it('should render', () => {
+    const instance = render()
+    expect(instance).toBeTruthy()
+  })
+
+  it('should create inline styles', () => {
+    const myTheme = {
+      text: 'red',
+    }
+    const instance = render({ myTheme })
+    const container = getByTestId('container')
+    expect(container.style).toBeTruthy()
+    expect(container.style.getPropertyValue('--text')).toBe('red')
+  })
+})

test/use.test.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { theme } from '../components/use'
+  export let myTheme = {
+    text: 'red',
+  }
+</script>
+
+<div use:theme="{myTheme}" data-testid="container">
+  <p data-testid="paragraph">Hello, World!</p>
+</div>
+
+<style>
+  p {
+    color: var(--text);
+  }
+</style>

types/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ThemeWrapper } from "./ThemeWrapper.svelte";
 export { default as ThemeToggle } from "./ThemeToggle.svelte";
+export { default as presets } from "./presets.js";