nitro-web 0.0.28 → 0.0.29

package/client/app.tsx

@@ -49,9 +49,8 @@ export async function setupApp(config: Config, storeContainer: StoreContainer, l
   // Setup the jwt token
   updateJwt(localStorage.getItem(injectedConfig.jwtName))
 
-  // Fetch the store/state
-  const data = (await settings.beforeApp(config)) || {}
-  // Make the store data available to the store
+  // Fetch the store data, and make it available to the store
+  const data = await settings.beforeApp(config)
   Object.assign(preloadedStoreData, data)
 
   const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement)
@@ -270,8 +269,8 @@ async function beforeApp(config: Config) {
    * Gets called once before React is initialised
    * @return {promise} - newStoreData which is used for sharedStore, later merged with the config.store() defaults
    */
-  let apiAvailable
-  let stateData
+  let apiAvailable = false
+  let storeData = {}
   try {
     // Unload prehot data
     // if (window.prehot) {
@@ -279,14 +278,14 @@ async function beforeApp(config: Config) {
     //   delete window.prehot
     // }
     if (!config.isStatic) {
-      stateData = (await axios().get('/api/state', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
+      storeData = (await axios().get('/api/store', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
       apiAvailable = true
     }
   } catch (err) {
     console.error('We had trouble connecting to the API, please refresh')
     console.log(err)
   }
-  return { ...stateData, apiAvailable }
+  return { ...storeData, apiAvailable }
 }
 
 const defaultMiddleware = {

package/client/store.ts

@@ -4,8 +4,8 @@ import { axios, isObject } from 'nitro-web/util'
 import { updateJwt } from 'nitro-web'
 import { Store } from 'nitro-web/types'
 
-export let preloadedStoreData: Store
-export let exposedStoreData: Store
+export const preloadedStoreData: Store = {}
+export let exposedStoreData: Store = preloadedStoreData
 
 export function createStore<T extends Store>(store: T) {
   const container = createContainer(() => {

package/components/auth/auth.api.js

@@ -14,7 +14,7 @@ const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secre
 export default {
 
   routes: {
-    'get     /api/state': ['state'],
+    'get     /api/store': ['store'],
     'get     /api/signout': ['signout'],
     'post    /api/signin': ['signin'],
     'post    /api/signup': ['signup'],
@@ -87,8 +87,8 @@ export default {
     })
   },
 
-  state: async function (req, res) {
-    res.json(await this._getState(req.user))
+  store: async function (req, res) {
+    res.json(await this._getStore(req.user))
   },
 
   signup: async function (req, res) {
@@ -208,10 +208,10 @@ export default {
 
   /* ---- Private fns ---------------- */
 
-  _getState: async function (user) {
-    // Initial state
+  _getStore: async function (user) {
+    // Initial store
     return {
-      user: user || null,
+      user: user || undefined,
     }
   },
 
@@ -220,8 +220,8 @@ export default {
     user.desktop = isDesktop
 
     const jwt = jsonwebtoken.sign({ _id: user._id }, JWT_SECRET, { expiresIn: '30d' })
-    const state = await this._getState(user)
-    return { ...state, jwt }
+    const store = await this._getStore(user)
+    return { ...store, jwt }
   },
 
   _tokenCreate: function (id) {

package/components/auth/reset.tsx

@@ -10,7 +10,7 @@ export function ResetInstructions() {
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
       await util.request('post /api/reset-instructions', state, event, isLoading)
-      setStore(s => ({ ...s, message: 'Done! Please check your email.' }))
+      setStore((s) => ({ ...s, message: 'Done! Please check your email.' }))
       navigate('/signin')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
@@ -53,7 +53,7 @@ export function ResetPassword() {
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
       const data = await util.request('post /api/reset-password', state, event, isLoading)
-      setStore(() => data)
+      setStore((s) => ({ ...s, ...data }))
       navigate('/')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })

package/components/auth/signin.tsx

@@ -7,6 +7,7 @@ export function Signin() {
   const isSignout = location.pathname == '/signout'
   const isLoading = useState(isSignout)
   const [, setStore] = useTracked()
+  
   const [state, setState] = useState({
     email: injectedConfig.env == 'development' ? (injectedConfig.placeholderEmail || '') : '',
     password: injectedConfig.env == 'development' ? '1234' : '',
@@ -21,7 +22,7 @@ export function Signin() {
 
   useEffect(() => {
     if (isSignout) {
-      setStore(() => ({ user: null }))
+      setStore((s) => ({ ...s, user: undefined }))
       // util.axios().get('/api/signout')
       Promise.resolve()
         .then(() => isLoading[1](false))
@@ -35,7 +36,7 @@ export function Signin() {
     try {
       const data = await util.request('post /api/signin', state, e, isLoading)
       isLoading[1](true)
-      setStore(() => data)
+      setStore((s) => ({ ...s, ...data }))
       setTimeout(() => { // wait for setStore
         if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
         else navigate('/')

package/components/auth/signup.tsx

@@ -17,7 +17,7 @@ export function Signup() {
     try {
       const data = await util.request('post /api/signup', state, e, isLoading)
       isLoading[1](true)
-      setStore(() => data)
+      setStore((s) => ({ ...s, ...data }))
       setTimeout(() => navigate('/'), 0) // wait for setStore
     } catch (e) {
       return setState({ ...state, errors: e as Errors })

package/components/partials/element/message.tsx

@@ -74,7 +74,7 @@ export function Message() {
 
   function hide() {
     setVisible(false)
-    setTimeout(() => setStore(s => ({ ...s, message: null })), 250)
+    setTimeout(() => setStore(s => ({ ...s, message: undefined })), 250)
   }
 
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",

package/tsconfig.json

@@ -31,6 +31,7 @@
     "client",
     "components/**/*.tsx",
     "components/**/*.ts",
-    "types"
+    "types",
+    "./types/core-only-globals.d.ts"
   ]
 }

package/types/core-only-globals.d.ts

@@ -0,0 +1,9 @@
+import { Store } from 'nitro-web/types'
+import { Dispatch, SetStateAction } from 'react'
+
+// Core-only global, this global will be defined globally in the project (e.g. in ./client/index.ts)
+declare global { 
+  const useTracked: () => [Store, Dispatch<SetStateAction<Store>>]
+}
+
+export {}

package/types.ts

@@ -46,10 +46,10 @@ export type MessageObject = {
 }
 
 export type Store = {
-  message?: MessageObject | string | null
-  user?: User | null,
   apiAvailable?: boolean
   jwt?: string
+  message?: MessageObject | string
+  user?: User,
 }
 
 export type Svg = React.FC<React.SVGProps<SVGElement>>