on/Sight dev folder theme tools, utilities and helpful functions
npm install @on-sight/dev-toolsdev-tools intends to organize a large amount of the scaffolding included within each new theme.dev-tools is as easy as 1, 2, 3, 4, 5, 6, 7...1. Install the @on-sight/dev-tools package in your project:
``bash`
npm install @on-sight/dev-tools
2. Import engine into your main JS entry point:`js`
import engine from '@on-sight/dev-tools'
3. Call the engine function and pass in your preferred configurations:
`js`
engine({...config})
Get yer engine started 🚗. Hassle free set-up. The on/Sight Dev Engine is built to take in a configuration object and sets up a variety of runner tools for you. The engine function is built for flexibilty, scale, and smart configurations.
Use data attributes on your HTML to automatically watch, import, and run your JS files. You can immediately hook up an HTML element by using one of the two specified categories:[data-utility]
-
-
The JS file will run with the specified element being passed in as the wrapper
You need to attach a specific file path as the attribute value [data]
Read about how to use the file router
There's no more need for a snippets/userback.liquid file in your project, with the power of JavaScript you can simply pass in your Userback token and watch your troubles melt away 🫠
js
engine({
userback: {
// Pass in your real (project-specific) access token here
accessToken: 'totallyRealAccessTokenExample'
}
})
`$3
The key currently has no additional settings. If you have an idea for one to add, please read through the [Contribution Guidelines]() and start a conversation in Discord!Barba Transitions
↑ Jump back to Package Features listDefault Configurations
↑ Jump back to Package Features listJS class object, class prefixing, tailwind breakpoints, and more!
jQuery Plugins
↑ Jump back to Package Features listwatchFor, isInViewport, onClassChange, onDraglessClick, and more!Read more about the available plugins here
Utility Functions
↑ Jump back to Package Features listUse our amazing utility functions throughout your JS
Read more about the available utility functions here
Examples and Usage
- Getting Started: Importing
- File Router UsageGetting Started: Importing
Back to top
- import engine from '@on-sight/dev-tools'
-
- File Router Usage
Lorem ipsum dolar sit amethtml
data-link="/blog/your-url"
>
Click me
`You can also pass multiple file paths by comma separating them:
html
data-link="/blog/your-url"
data-toggle="#some-query"
>
Click me
`File paths can also include a subfolder:
html
`
Default Settings
Overview of what is and how it gets used by the engine.
- Dev Engine Settings
- File Router Settings
- Userback Settings
- Barba Settings
- Plugins Settings
- Class Settings
- Tailwind Settings
- Debug Settings
- Additional SettingsDev Engine Settings
File Router Settings
The fileRouter key currently has one customizable setting. You can customize watchForSelectors by supplying an array of objects with keys path, selector, and fileName. Please be careful when customizing this as it holds a lot of power in the engine setup. Below is the default config object for
watchForSelectors.`js
watchForSelectors: [
{ path: 'utilities', selector: '[data-utility]' },
{ path: 'components', selector: '[data-component]' },
{ path: 'utilities', selector: '[class*="reveal"]', fileName: 'reveal' },
]
``