Skip to main content

Basic Core

Quick Setup​

With Yarn
yarn create plexus-core --typescript
With NPX
npx create-plexus-core --typescript

Ideology​

The focus of this style is to be simple and clean. Very little boilerplate but still well organized. This style works best for:

  • Sub-sites and basic dashboards
  • Weekend side-projects
  • School projects

File Structure Suggestion​

/project-root
├─ core/
│ ├─ actions.ts
│ ├─ states.ts
└ ├─ api.ts
  └─ types.ts

File Content Examples​

/core/types.ts​

We can create our types and interfaces in this file and export it for the rest of our core (or the rest of our app if we want).

/core/types.ts
export interface ChannelData {
    uuid: string
    name: string
    followers: number
}

/core/states.ts​

This is where we define stateful instances things like states, computed, and collections.

/core/states.ts
import { state, collection, computed } from '@plexusjs/core'

// Importing the ChannelData type
import { ChannelData } from '/types'

// Create a state instance
export const userData = state({
    name: '',
    age: -1,
})

// This collection is used to store the channels, the objects should be of type ChannelData defined above
export const channelsCollection = collection<ChannelData>({
    primaryKey: 'uuid', // default value is "id"
})

/core/api.ts​

This is where we can create our API instances. we can interract with this elsewhere to interract with data from the server.

/core/api.ts
import { api } from '@plexusjs/core'

// You can use the api to make requests to the server at a specific endpoint
export const channelBroker = api('https://api.example.com/channels').auth(
    'MyCoolAuthToken',
    'bearer'
)

/core/actions.ts​

Here is where we define our actions. An action is a function that is called to preform business logic. Technically, an action is just a buffed up function, so you can just use it as a function wrapper to gain the benifits of the action hooks.

/core/actions.ts
import { action } from '@plexusjs/core'

// Import your module instances
import { channelsCollection } from './states'
import { channelBroker } from './api'

// This action is used to fetch the channels from the API
export const subscribeToChannel = action(async ({ onCatch }) => {
    onCatch(console.error)
    const { data } = await channelBroker.get('/get-channels')

    channelsCollection.collect(data)
})

/core/index.ts​

Here is the final file we make; the index file takes all of your instances from the other files and exports them into single point.

/core/index.ts
// Import your module instances
import * as actions from './actions'
import * as states from './states'
import * as api from './api'

// Export your module instances from a single index.ts file
export { actions, states, api }