Merge pull request cerebral#388 from mfeitoza/master

Svelte plugin

Author: christianalfoni

.cz-config.js

@@ -37,6 +37,7 @@ module.exports = {
     { name: 'overmind-graphql' },
     { name: 'overmind-statechart' },
     { name: 'overmind-react' },
+    { name: 'overmind-svelte' },
     { name: 'overmind-vue' },
     { name: 'overmind-angular' },
     { name: 'action-chain' },

package-lock.json

@@ -57,6 +57,7 @@
     "react-icons": "^3.5.0",
     "react-split-pane": "0.1.87",
     "styled-components": "3.3.3",
+    "svelte": "^3.20.1",
     "tslib": "1.10.0",
     "vscode": "^1.1.36",
     "vue": "2.6.10",

package.json

@@ -0,0 +1,3 @@
+src
+jest.config.js
+tsconfig.json

packages/node_modules/overmind-svelte/.npmignore

@@ -0,0 +1,3 @@
+# overmind-vue
+
+[https://overmindjs.org](https://overmindjs.org)

packages/node_modules/overmind-svelte/README.md

@@ -0,0 +1,22 @@
+module.exports = {
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{t,j}s?(x)', '!src/**/*.d.ts'],
+  moduleFileExtensions: ['ts', 'js', 'svelte'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.svelte$': 'svelte-jester'
+  },
+  testRegex: '\\.test\\.ts?$',
+  testPathIgnorePatterns: [
+    '/dist/',
+    '/es/',
+    '/lib/',
+    '<rootDir>/node_modules/',
+  ],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
+  haste: {
+    // This option is needed or else globbing ignores <rootDir>/node_modules.
+    providesModuleNodeModules: ['overmind-svelte'],
+  },
+}

packages/node_modules/overmind-svelte/jest.config.js

@@ -0,0 +1,48 @@
+{
+  "name": "overmind-svelte",
+  "version": "1.0.0-alpha1",
+  "description": "Functional actions",
+  "author": "Marcus Feitoza <[email protected]>",
+  "license": "MIT",
+  "repository": "git+https://github.com/cerebral/overmind.git",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "npm run build:lib & npm run build:es",
+    "build:lib": "tsc --outDir lib --module commonjs",
+    "build:es": "tsc --outDir es --module es2015",
+    "clean": "rimraf es lib coverage",
+    "typecheck": "tsc --noEmit",
+    "test": "jest --runInBand",
+    "test:watch": "jest --watch --updateSnapshot --coverage false",
+    "prebuild": "npm run clean",
+    "postbuild": "rimraf {lib,es}/**/__tests__",
+    "posttest": "npm run typecheck"
+  },
+  "keywords": [
+    "state",
+    "sideeffects",
+    "app",
+    "framework"
+  ],
+  "files": [
+    "lib",
+    "es",
+    "react"
+  ],
+  "dependencies": {
+    "overmind": "next",
+    "svelte": "^3.20.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.3.0",
+    "@testing-library/svelte": "^3.0.0",
+    "@types/node": "^12.11.6",
+    "svelte-jester": "^1.0.5",
+    "tslib": "^1.10.0"
+  },
+  "setupFilesAfterEnv": [
+    "@testing-library/jest-dom/extend-expect"
+  ]
+}

packages/node_modules/overmind-svelte/package.json

@@ -0,0 +1,24 @@
+<script>
+
+    export let store
+
+    const state = store.state
+
+    $: count = $state.count
+    let doubled = undefined
+    store.reaction(
+        (state) => state.count,
+        (value) => {
+            doubled = value * 2
+        },
+        {
+            immediate: true
+        }
+    )
+    
+</script>
+
+<p>Count: {count}</p>
+<p>Doubled: {doubled}</p>
+<button id="increase" on:click={() => store.actions.increase()}>Increase</button>
+<button id="decrease" on:click={() => store.actions.decrease()}>Increase</button>

packages/node_modules/overmind-svelte/src/CountTest.svelte

@@ -0,0 +1,87 @@
+
+import '@testing-library/jest-dom/extend-expect'
+import { render, fireEvent } from '@testing-library/svelte'
+
+import { Overmind } from 'overmind'
+
+import { createMixin } from './'
+import CountTest from './CountTest.svelte'
+
+
+const app = {
+  state: {
+      count: 0
+  },
+  actions: {
+      increase({ state }) {
+      state.count++;
+      },
+      decrease({ state }) {
+      state.count--;
+      }
+  }
+}
+
+describe('Svelte', () => {
+  test('should create mixin', () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    expect('state' in mixin)
+  })
+
+  test('should expose subscribe', () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    expect(typeof mixin.state.subscribe === 'function')
+  })
+
+  test('should display current state', () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    const { getByText, getAllByRole } = render(CountTest, { store: mixin })
+    expect(getByText('Count: 0')).toBeInTheDocument()
+  })
+
+  test('should update state by button click', async () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    const { getAllByRole } = render(CountTest, { store: mixin })
+    const [increaseBtn, ] = getAllByRole('button')
+
+    await fireEvent.click(increaseBtn)
+    await fireEvent.click(increaseBtn)
+
+    expect(mixin.state.count === 2)
+  })
+
+  test('should update view on state change', async () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    const { getByText, getAllByRole } = render(CountTest, { store: mixin })
+    const [increaseBtn, decreaseBtn] = getAllByRole('button')
+
+    await fireEvent.click(increaseBtn)
+
+    expect(getByText('Count: 1')).toBeInTheDocument()
+  })
+
+  test('should update view on reaction', async () => {
+    const overmind = new Overmind(app)
+    const mixin = createMixin(overmind)
+
+    const { getByText, getAllByRole } = render(CountTest, { store: mixin })
+    const [increaseBtn, ] = getAllByRole('button')
+
+    expect(getByText('Doubled: 0')).toBeInTheDocument()
+
+    await fireEvent.click(increaseBtn)
+    await fireEvent.click(increaseBtn)
+
+    expect(getByText('Doubled: 4')).toBeInTheDocument()
+  })
+})

packages/node_modules/overmind-svelte/src/index.test.ts

@@ -0,0 +1,84 @@
+import { EventType } from 'overmind'
+import { onMount, afterUpdate, onDestroy } from 'svelte'
+
+const IS_PRODUCTION = process.env.NODE_ENV === 'production'
+
+let nextComponentId = 0
+
+export function createMixin (overmind) {
+  const componentId = nextComponentId++
+  let nextComponentInstanceId = 0
+  let currentFlushId = 0
+
+  const subscribe = listener => {
+    const tree = overmind.proxyStateTree.getTrackStateTree()
+    const componentInstanceId = nextComponentInstanceId++
+    let isUpdating = false
+
+    const onUpdate = (mutations, paths, flushId) => {
+      tree.track(onUpdate)
+      currentFlushId = flushId
+      isUpdating = true
+      listener(tree.state)
+    }
+
+    tree.track(onUpdate)
+
+    listener(tree.state)
+
+    if (IS_PRODUCTION) {
+      afterUpdate(() => {
+        tree.stopTracking()
+        isUpdating = false
+      })
+    } else {
+      onMount(() => {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+          componentId,
+          componentInstanceId,
+          name: '',
+          paths: Array.from(tree.pathDependencies)
+        })
+      })
+
+      afterUpdate(() => {
+        tree.stopTracking()
+        if (isUpdating) {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId,
+            componentInstanceId,
+            name: '',
+            flushId: currentFlushId,
+            paths: Array.from(tree.pathDependencies)
+          })
+        }
+        isUpdating = false
+      })
+    }
+
+    return () => {
+      overmind.proxyStateTree.disposeTree(tree)
+      overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+        componentId,
+        componentInstanceId: componentInstanceId,
+        name: ''
+      })
+    }
+  }
+
+  const reaction = (...args) => {
+    const dispose = overmind.reaction(...args)
+
+    onDestroy(() => {
+      dispose()
+    })
+  }
+
+  return {
+    state: { ...overmind.state, subscribe},
+    actions: overmind.actions,
+    effects: overmind.effects,
+    addMutationListener: overmind.addMutationListener,
+    reaction: reaction
+  }
+}