feat(svelte): added support to default properties, docs and tests

morfeojs · Jun 6, 2021 · a734021 · a734021
1 parent c7691f7
commit a734021
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 3 deletions.
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
@@ -1,11 +1,107 @@
 <div align="center">
 <h1>@morfeo/svelte</h1>
 </div>
-<a href="https://github.com/VLK-STUDIO/morfeo">morfeo</a> is a framework-agnostic set of tools that will help you to build your next <strong>design system</strong> based on a single source of truth: the <strong>theme</strong>.
+**@morfeo/svelte** is part of the [morfeo](https://github.com/VLK-STUDIO/morfeo) eco-system: a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.
+
+---
 
 <div align="center">
   <a href="https://github.com/VLK-STUDIO/morfeo">Documentation</a> |
   <a href="https://github.com/VLK-STUDIO/morfeo">API</a> |
-  <a href="https://github.com/VLK-STUDIO/morfeo">Contributing</a> |
+  <a href="https://github.com/VLK-STUDIO/morfeo/blob/main/CONTRIBUTING.md">Contributing</a> |
   <a href="https://morfeo.slack.com">Slack</a>
 </div>
+
+---
+
+**@morfeo/svelte** expose a [svelte action](https://svelte.dev/docs#use_action) that you can apply to your components to use morfeo.
+
+## Installation
+
+with [npm](https://www.npmjs.com/package/@morfeo/svelte):
+
+```bash
+npm install @morfeo/web @morfeo/svelte
+```
+
+or [yarn](https://yarn.pm/@morfeo/svelte):
+
+```bash
+yarn add @morfeo/web @morfeo/svelte
+```
+
+## Usage
+
+```html
+<script>
+	import { morfeo } from "@morfeo/svelte";
+</script>
+
+<button use:morfeo={{...$$restProps, componentName: 'Button' }}>
+  <slot></slot>
+</button>
+```
+
+This component can now be stylized referring to the theme with inline style.
+
+```html
+<script>
+  import Button from './Button.svelte';
+</script>
+
+<div>
+  <button bg="dark" borerRadius="m" px="xs" py="xxs">Click me</button>
+</div>
+```
+
+Or simply defining the style directly inside the theme object:
+
+```typescript
+const myTheme = {
+  ...rest,
+  components: {
+    Button: {
+      style: {
+        bg: 'dark',
+        borderRadius: 'm',
+        px: 'xs',
+        py: 'xxs',
+      },
+      props: {
+      	type: 'submit'
+      },
+      variants: {
+        primary: {
+          style: {
+            bg: 'primary',
+          	borderWidth: 's',
+         		borderColor: 'secondary',
+          },
+        },
+        submit: {
+          style: {
+            bg: 'secondary'
+          },
+          props: {
+            type: 'submit'
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+```html
+<script>
+  import Button from './Button.svelte';
+</script>
+
+<div>
+  <Button>Regular button</Button>
+  <Button variant="primary">Primary button</Button>
+  <!-- This will be rendered with the attribute type="submit" -->
+  <Button variant="submit">Submit button</Button>
+</div>
+```
+
diff --git a/packages/svelte/src/morfeoAction.ts b/packages/svelte/src/morfeoAction.ts
@@ -1,5 +1,5 @@
 import { getStyles } from '@morfeo/jss';
-import { Style } from '@morfeo/web';
+import { Component, component, Style } from '@morfeo/web';
 
 function getElementName({ componentName, variant }: Style) {
   if (componentName && variant) {
@@ -9,14 +9,31 @@ function getElementName({ componentName, variant }: Style) {
   return componentName || 'morfeo-element';
 }
 
+function setAdditionalProps(
+  node: HTMLElement,
+  { componentName, variant }: Style,
+) {
+  if (!componentName) {
+    return {};
+  }
+  const props = component(componentName, variant).getProps();
+
+  if (!props) {
+    return;
+  }
+  Object.keys(props).forEach(prop => node.setAttribute(prop, props[prop]));
+}
+
 export function morfeo(node: HTMLElement, props: Style = {}) {
   const elementName = getElementName(props);
   let { classes, update, destroy } = getStyles({ [elementName]: props });
 
   node.classList.add(classes[elementName]);
+  setAdditionalProps(node, props);
 
   return {
     update(nextProps: Style) {
+      setAdditionalProps(node, { ...props, ...nextProps });
       update({ [elementName]: nextProps });
     },
     destroy,

diff --git a/packages/svelte/tests/morfeo.test.ts b/packages/svelte/tests/morfeo.test.ts
@@ -11,6 +11,14 @@ const THEME: Theme = {
       style: {
         bg: 'secondary',
       },
+      variants: {
+        span: {
+          style: {},
+          props: {
+            'data-test': 'additional prop',
+          },
+        },
+      },
     },
   },
 } as any;
@@ -61,4 +69,27 @@ describe('morfeo', () => {
     update({} as any);
     expect(typeof update).toBe('function');
   });
+
+  test('should set the default properties to the element', () => {
+    const element = document.createElement('div');
+    morfeo(element, {
+      componentName: 'Box',
+      variant: 'span',
+    });
+
+    expect(element.getAttribute('data-test')).toBe('additional prop');
+  });
+
+  test('should update the default properties of to the element', () => {
+    const element = document.createElement('div');
+    const { update } = morfeo(element, {
+      componentName: 'Box',
+    });
+
+    expect(element.getAttribute('data-test')).toBeFalsy();
+
+    update({ variant: 'span' });
+
+    expect(element.getAttribute('data-test')).toBe('additional prop');
+  });
 });