Solid Fundamentals... That help create lovely web sites & mobile applications!
Solid Fun Features!SPA navigation! 🧚♀️In editor, autocomplete & typesafety @:
Solid Fun is less then 150 kB, requires 0 dependencies & features an automatically & beautifully, tree shaked API! 🙌set(), get() & clear(), session data helpers! 🚨async functions before your route's or api's boot! 🔐layouts for routes to be placed within! 📥Define, read and validate, path or search params, at api's or route's! 🪷autocompleting intellisense types for existing ones 🏗️ wih our blazingly-fast cli! ⚡️Solid Fun types, functions and components! 🤓<AnimatedFor />: Animate your lists beautifully & smoothly with CSS animations! 🌀<Messages /> When saving forms, show error messages for the form as a hole & also show validation messages per input, by the input! 🎯Shimmer & LoadSpin: Show gentle loading animations with CSS classes! ✨mongoConnect() & mongoModel(): Manage mongoose data pools & enhance standard mongo typesafety!cuteLog() - Create strings w/ 30+ customization options 🎨holdUp() - Pause for a specific or random amount of time ⏳loremWords() - Generate the number of lorem words you'd love ✍️bash terminal, & then:
npx create-solidfun@latest # that was easy 🥳
import { API } from '@solidfun/api'
export const GET = new API('/api/aloha')
.fn(async (be) => {
return be.json({ aloha: true })
})
routes & apis!import { API } from '@solidfun/api'
export const GET = new API('/api/aloha/:id/:ascend?')
.params<{ id: number, ascend: boolean }>() // set params type here & then this api's params are known @ .fn() & app-wide 🙌
.fn(async (be) => {
const params = be.getParams()
return be.json({ params })
})
routes & apis!import { API } from '@solidfun/api'
import { authB4 } from '@src/lib/b4'
export const GET = new API('/api/aloha')
.b4(authB4) // run this async function b4 this api boots!
.fn(async (be) => {
return be.json({ aloha: true })
})
import { compare } from 'bcrypt'
import { go } from '@solidfun/go'
import { API } from '@solidfun/api'
import { guestB4 } from '@src/lib/b4'
import { SessionData } from 'fun.config'
import { M_User } from '@src/db/M_User'
import { setSessionData } from '@solidfun/session'
import { mongoConnect } from '@solidfun/mongoConnect'
import { signInSchema, SignInSchema } from '@src/schemas/SignInSchema'
export const POST = new API('/api/sign-in')
.b4(guestB4)
.body<SignInSchema>() // tells .fn() & app-wide the request body this api requires
.fn((be) => {
const body = signInSchema.parse(await be.getBody()) // get, validate & parse the request body in 1 line!
await mongoConnect() // ensures 1 mongo pool is running
const user = await M_User.get().findOne({ email: body.email }).lean()
if (!user) throw new Error('Please use valid credentials')
if (!await compare(body.password, user.passwordHash)) throw new Error('Please use valid credentials')
const sessionData: SessionData = { id: user.id }
setSessionData(sessionData)
return be.go('/auhenticated') // go() knows about all your routes & provides autocomplete!
}
})
import { pipe, email, string, object, nonEmpty } from 'valibot'
import { ValibotSchema, type InferValibotSchema } from '@solidfun/valibotSchema'
export const signInSchema = new ValibotSchema( // schema's validate (be) api's above & (fe) route's below!
object({
email: pipe(string(), email('Please provide a valid email')),
password: pipe(string(), nonEmpty('Please provide a password')),
})
)
export type SignInSchema = InferValibotSchema<typeof signInSchema> // by defining runtime validations above, we get compile time types app-wide!
import './Guest.css'
import GuestNav from './GuestNav'
import { Layout } from '@solidfun/layout'
export default new Layout()
.component((fe) => {
return <>
<div class="guest">
<GuestNav />
{fe.getChildren()}
</div>
</>
})
import { A } from '@solidfun/a'
import { Title } from '@solidjs/meta'
import { Route } from '@solidfun/route'
export default new Route('/yin') // this route uses no layouts!
.component((fe) => {
return <>
<Title>Yin</Title>
<A path="/yang">Yang</A> {/* <A /> knows about your routes & provides autocomplete! 🙌 */}
</>
})
import { Title } from '@solidjs/meta'
import { guestB4 } from '@src/lib/b4'
import RootLayout from '../RootLayout'
import { clear } from '@solidfun/clear'
import { Route } from '@solidfun/route'
import GuestLayout from './Guest.Layout'
import { Submit } from '@solidfun/submit'
import { Messages } from '@solidfun/messages'
import { signUpSchema } from '@src/schemas/SignUpSchema'
import { createOnSubmit } from '@solidfun/createOnSubmit'
export default new Route('/sign-up/:sourceId?')
.b4(guestB4) // run this asyc fn b4 route render
.layouts([RootLayout, GuestLayout]) // Root wraps Guest, Guest wraps this Route!
.component((fe) => {
const onSubmit = createOnSubmit(async (fd) => { // createOnSubmit() places this async fn() into a try/catch for us & on fe or be catch, <Messages /> get populated below!
const body = signUpSchema.parse({ // get parse & validate request body
email: fd('email'), // fd() is a form data helper
password: fd('password')
})
await fe.POST('/api/sign-up', { body, bitKey: 'signUp' }) // a bit is a boolean signal 💃 & this path & body have autocomplete!
})
return <>
<Title>Sign Up</Title>
<form onSubmit={onSubmit}>
<input placeholder="Email" name="email" type="email" use:clear />
<Messages name="email" /> {/* shows messages, from signUpSchema.parse() and/or fe.POST(), for just the email input! 🚀 */}
<input placeholder="Password" name="password" type="password" use:clear /> {/* the use:clear directive clears password <Messages /> on first interaction w/ this input! */}
<Messages name="password" />
<div class="footer">
<Submit label="Sign Up" bitKey="signUp" /> {/* Uses fe.bits.isOn('signUp') to show a loading indicator! 🏋️♂️ */}
</div>
</form>
</>
}
})
Workers & Pages./fun.config.jsenvs: [
{ name: 'local', url: 'http://localhost:3000' },
{ name: 'prod', url: 'https://example.solidfun.workers.dev' },
]
How to show intellisense dropdown in VS Code?
Control + SpaceHow to reload VS Code?
Command + Shift + Preload windowEnterHow to open VS Code settings.json
Command + Shift + Puser settings jsonEnterHow to get VS Code to create <div class="example"></div> on .example
settings.json add:
{
"emmet.includeLanguages": {
"typescriptreact": "html",
"javascriptreact": "html"
}
}
How to run code . in VS Code bash & have it open a new VS Code in that directory
Command + Shift + PShell Command: Install 'code' command in PATHEnterHow to get the Solid icon for .tsx files in VS Code
Symbols extension by Miguel Solorio~/.vscode/extensions/miguelsolorio.symbols- w/ the proper versioncode ./src/icons/files/ place solid.svg/src/symbol-icon-theme.json w/in iconDefinitions place "solid": { "iconPath": "./icons/files/solid.svg" },fileExtensions update "tsx": "solid", & anywhere else ya love!settings.json add:
"symbols.files.associations": {
"*.jsx": "solidjs",
"*.tsx": "solidjs"
}
Gotta errors dictionary?
FAQs
Solid Fundamentals... That help create lovely web sites & mobile applications!
We found that solidfun demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.