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

apprun

v3.32.0

Published

JavaScript library that has Elm inspired architecture, event pub-sub and components

Downloads

962

Readme

AppRun Build NPM version Downloads License twitter Discord Chat

AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components.

// define the application state
const state = 0;

// view is a pure function to display the state
const view = state => `<div>
  <h1>${state}</h1>
  <button onclick="app.run('-1')">-1</button>
  <button onclick="app.run('+1')">+1</button>
</div>`;

// update is a collection of event handlers
const update = {
  '+1': state => state + 1,
  '-1': state => state - 1
};
app.start(document.body, state, view, update, { transition: true });

Note, the transition option is newly added to enable the View Transition API during the rendering of the view.

AppRun Benefits

  • Clean architecure that needs less code
  • State management and routing included
  • No proprietary syntax to learn (no hooks)
  • Use directly in the browser or with a compiler/bundler
  • Advanced features: JSX, Web Components, Dev Tools, SSR, etc.

Getting Started

AppRun is distributed on npm. To get it, run:

npm install apprun

You can also load AppRun directly from the unpkg.com CDN:

<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script>
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello AppRun', view);
</script>

Or, use the ESM version:

<script type="module">
  import { app } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js';
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello ESM', view);
</script>

Or, you can create an AppRun app by using the npm create apprun-app command.

npm create apprun-app [my-app]

Component and Web Component

An AppRun component is a mini-application with elm architecture, which means inside a component, there are state, view, and update. In addition, components provide a local scope.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <h1>{state}</h1>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
      </>;
  }
}
app.render(document.body, <Counter/>);

You can convert AppRun components into web components/custom elements. AppRun components become the custom elements that also can handle AppRun events.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <h1>{state}</h1>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
      </>;
  }
}
app.webComponent('my-app', Counter);
app.render(document.body, <my-app />);

All the Ways to Make a Web Component - May 2021 Update compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.

Learn More

You can get started with AppRun Docs and the AppRun Playground.

AppRun Book from Apress

Order from Amazon

Contribute

You can launch the webpack dev-server and the demo app from the demo folder with the following npm commands:

npm install
npm start

You can run the unit tests from the tests folder.

npm test

Unit tests can serve as functional specifications.

Finally, to build optimized js files to the dist folder, just run:

npm run build

Have fun and send pull requests.

Contributors

Support

AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍❤️🙏

Thank you for your support

  • Athkahden Asura
  • Alfred Nerstu
  • Gyuri Lajos
  • Lorenz Glißmann
  • Kevin Shi
  • Chancy Kennedy

License

MIT

Copyright (c) 2015-2022 Yiyi Sun