🐛 Fix major issue with provider orders in createApp util

Author: amoutonbrady

package.json

@@ -32,17 +32,17 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-node-resolve": "^11.1.0",
     "@skypack/package-check": "^0.2.2",
     "babel-preset-solid": "^0.23.8",
     "prettier": "^2.2.1",
-    "rollup": "^2.36.1",
+    "rollup": "^2.36.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-delete": "^2.0.0",
     "typescript": "^4.1.3"
   },
   "dependencies": {
-    "solid-js": "^0.23.10"
+    "solid-js": "^0.23.11"
   },
   "peerDependencies": {
     "solid-js": "^0.23"

playground/index.tsx

@@ -1,12 +1,12 @@
-import { createApp, createStore, createGlobalState, createGlobalSignal } from '..';
+import { createApp, createStore, createGlobalState, createGlobalSignal } from '../src';
 
 const [globalState, setGlobalState] = createGlobalState({ name: 'hello' });
 const [globalSignal, setGlobalSignal] = createGlobalSignal(20);
 
 const [Provider, useProvider] = createStore({
   state: (props) => ({ count: props.count }),
   actions: (set) => ({ inc: () => set('count', (c) => c + 1) }),
-  effects: (_, get) => [() => console.log(get.count)],
+  effects: (set, get) => [() => console.log(get.count)],
   props: { count: 0 },
 });
 

playground/package.json

@@ -4,17 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "build": "vite build"
   },
   "keywords": [],
   "author": "Alexandre Mouton-Brady",
   "license": "ISC",
   "devDependencies": {
     "babel-preset-solid": "^0.23.8",
-    "vite": "^2.0.0-beta.5",
-    "vite-plugin-solid": "^0.6.0"
+    "vite": "^2.0.0-beta.44",
+    "vite-plugin-solid": "^0.7.0"
   },
   "dependencies": {
-    "solid-js": "^0.23.10"
+    "solid-js": "^0.23.11"
   }
 }

playground/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import type { Component } from 'solid-js';
+import type { JSX, Component } from 'solid-js';
 import { createComponent, render } from 'solid-js/web';
 
 interface App {
@@ -50,22 +50,22 @@ interface Provider {
  *  )
  */
 function mergeProviders(app: () => Element, providers: Provider[]) {
-  return providers.reduceRight((application, { provider, opts }) => {
+  return providers.reduceRight<JSX.Element | undefined>((application, { provider, opts }) => {
     return createComponent(provider, {
       ...opts,
 
       get children() {
-        return application;
+        return application || createComponent(app, {});
       },
     });
-  }, app);
+  }, undefined);
 }
 
 export function createApp<T extends unknown>(app: T) {
   const providers: Provider[] = [];
 
   const _app: App = {
-    use(provider, opts) {
+    use(provider, opts = {} as any) {
       providers.push({ provider, opts });
       return _app;
     },