basic.mdx

title	sidebar_position	slug
Basic Core	1	/style-guides

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).

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.

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.

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.

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.

// 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 }