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

staticpro.js

v1.1.2

Published

StaticPro.js is a lightweight JavaScript library designed to bring the flexibility and ease of use found in SPA (Single Page Application) frameworks such as Angular, React, and Vue to the development of static web pages. It provides a simple and intuitive

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

dumildemattosdumildemattos

Keywords

Readme

StaticPro.js

StaticPro.js is a lightweight JavaScript library designed to bring the flexibility and ease of use found in SPA (Single Page Application) frameworks such as Angular, React, and Vue to the development of static web pages. It provides a simple and intuitive starting point for front-end developers, allowing them to harness the power of directives, binds, and HTTP calls in their static applications.

Features

  • Custom Directives: Create customized directives tailored to your application's needs.

  • Attribute-Based Directives: Easily transform HTML attributes into dynamic directives for enhanced functionality.

  • If Directive: Use the If directive to conditionally show or hide elements based on a boolean attribute.

Getting Started

  1. Include the Library:

    • Download the bundle.js file from the latest release.

    • Include the following script tag in your HTML file:

      <script src="path/to/bundle.js"></script>

  2. Initialize the Library:

    • Add the Static attribute to the <body> tag to indicate that you want to use Staticpro.js:
    <body Static>
    <!-- Your static content goes here -->
</body>

  3. Use Directives in HTML:

    • Apply directives to your HTML elements using the specified syntax.

      <p If="true">This will be displayed</p>
<p If="false">This will be hidden</p>

  4. Run your Application:

    • Ensure your application is running, and the directives will be applied dynamically.

Data Binding

To use data binding, call the app method and pass a function that takes a single argument, $var. This object allows you to define properties that will be dynamically bound to your HTML elements.

Data Binding Example

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StaticPro.js Example</title>
  <script src="path/to/bundle.js"></script>
</head>
<body Static>

  <script>
    staticpro.app(($var) => {
      // Define properties for data binding
      $var.name = "John"; 
      $var.age = 21;
    });
  </script>

  <p If="false">hide</p>
  <p If="true">show</p>

  <p>{name} Doe</p> <!-- John Doe-->
  <p>{age}</p> <!-- 21-->

</body>
</html>

Contributing to StaticPro.js

Thank you for considering contributing to StaticPro.js! Your contributions help improve and grow the project. Before you start, please take a moment to read the following guidelines.

Table of Contents

Code of Conduct

Please review our Code of Conduct before contributing.

How Can I Contribute?

Reporting Bugs

If you find a bug, please open an issue with a detailed description of the problem. Be sure to include information about your environment.

Suggesting Enhancements

Have an idea to make StaticPro.js better? Great! Open an issue and describe your enhancement. We welcome your input!

Code Contributions

We welcome code contributions! To contribute code:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and ensure the tests pass.
  4. Open a pull request.

Getting Started

To get started with development, follow these steps:

  1. Clone the repository: git clone https://github.com/dumildematos/staticpro.js
  2. Install dependencies: npm install

Development Setup

No specific setup steps are needed for development.

Commit Guidelines

Follow the conventional commits specification for your commit messages.

Code Style

Maintain the existing code style. If in doubt, refer to the style guide or the existing codebase.

Testing

Ensure that your changes pass the existing tests. If you add new functionality, include relevant tests.

Documentation

Update the documentation to reflect your changes. Documentation is just as important as code!

Community

Connect with the StaticPro.js community:

License

By contributing, you agree that your contributions will be licensed under the LICENSE file of this project.

Happy contributing!