npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

scarletsframe

v0.35.26

Published

A frontend framework that can help you write a simple web structure

Downloads

96

Readme

Software License Tweet Discord

ScarletsFrame

A frontend framework that can help you write a simple web structure with complex feature. This framework built for performance with balanced memory allocation and allows you to directly write template in the HTML. Here you can see the benchmark.

The documentation located on Github Wiki.

This framework haven't reach v1.0.0. Every increment of (v0.*.0) may have a breaking changes. Please see the CHANGELOG.md if you want to check the breaking changes. Make sure to specify the version instead of latest when using CDN link or the package like below.

<!-- Production mode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.min.js"></script>

<!-- Development mode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.dev.js"></script>

<!-- sQuery only (sf.$) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/squery.min.js"></script>

Try it online like a project

Example with file and folder structure

Advanced Example

Simple Example

Real World App

Install with CDN link

This is optional if you prefer using CDN link. But I recommend to use the default template that have Hot Reload enabled.

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.min.js'></script>

Polyfill for older browser

The dist file from the CDN link will only support Chrome >= 55, Firefox >= 68, and iOS >= 10.3. If you want to support some old browser, you need to add some polyfill before load the framework. For Safari or iOS browser you may need to polyfill PointerEvent too

  // From https://polyfill.io/v3/url-builder/
  if(!window.ResizeObserver || !Element.prototype.append || !Element.prototype.matches || !Array.prototype.includes || !Object.assign || !window.MutationObserver)
    z('https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.prepend%2CArray.prototype.includes%2CArray.from%2CElement.prototype.matches%2CElement.prototype.closest%2CIntersectionObserver%2CIntersectionObserverEntry%2CObject.assign%2CObject.create%2CResizeObserver%2CPromise%2CWeakMap%2CWeakSet%2CrequestAnimationFrame%2CMutationObserver');
})();

Using the template

For starting the development environment, let's use the default template.

$ npm i -g scarletsframe-cli

# Download template to current directory
$ scarletsframe init default

# Install the needed package
$ npm i

# Start the development server
$ npm start

Install with with NPM

This is optional if you prefer for using webpack, parcel, rollup, etc.

$ npm i [email protected]

And include it on your project with webpack (example) or browserify.

const sf = require('scarletsframe');
// import { model } from "scarletsframe";

// You can use require to reference another model scope
sf.model('things', function(My, require) {
  My.something = 123;
});

Contribution

If you want to help in ScarletsFrame please fork this project and edit on your repository, then make a pull request to here. Otherwise, you can help with donation via kofi.

License

ScarletsFrame is under the MIT license.