@npmteam2024/suscipit-corporis-nisi
Advanced tools
Create blazing fast, lightweight, native, custom elements,
with minimal boilerplate and
almost no runtime libraries.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Evo-wc, or Evolved Web Components, is a Web Component transpiler. The developer builds simple XML files that are very similar to and HTML with only the code they need. Evo-wc transpiles the XMl files into a JavaScript file that contains a native Custom Element.
Evo-wc offers developers a powerful and efficient way to create web components, whether used independently or alongside existing frameworks. The generated elements are standards based and run lightning fast. Here are several compelling reasons why someone would want to consider using Evo:
Reduced Boilerplate Code: Evo dramatically reduces the amount of boilerplate code needed to create web components. Traditional web component development often involves writing extensive code for property accessors, event handling, and templating. Evo simplifies this process, allowing developers to focus on the core functionality of their components. This efficiency can save a significant amount of development time.
Native Web Components: Evo leverages the native web component standard, which has gained widespread browser support. This means that Evo-generated components can seamlessly integrate into web applications without relying on additional libraries or frameworks. Developers can enjoy the benefits of web components' encapsulation and reusability without the complexity of custom solutions.
Minimal Runtime Overhead: One of Evo's key strengths is its ability to shift much of the work from runtime to build time. This results in minimal runtime overhead, ensuring that Evo-generated components are highly performant. Faster-loading components lead to a more responsive user experience, making Evo an excellent choice for optimizing web applications.
Versatility with Existing Frameworks: Evo is not limited to standalone use. Developers can incorporate Evo-generated components into existing web frameworks, such as React, Angular, or Vue.js. This versatility allows for gradual adoption, enabling teams to leverage Evo's benefits in specific areas of their application while maintaining compatibility with their chosen framework.
Data Binding and Event Handling: Evo simplifies data binding and event handling within components. With straightforward syntax, developers can bind component properties to elements in the template, facilitating real-time updates. Event handling is equally intuitive, using native DOM events. This streamlines communication between components and ensures seamless interactivity.
Conditional Rendering and Looping: Evo introduces conditional directives like $if and $switch for flexible and efficient conditional rendering. It also supports looping through data arrays with the $for directive. These features empower developers to create dynamic user interfaces with ease.
Community and Ongoing Development: Evo has a growing community of developers and contributors who actively support its development. Regular updates and improvements ensure that Evo remains aligned with evolving web standards and best practices.
In summary, Evo provides a developer-friendly, high-performance solution for creating web components. Whether used independently to harness the full power of native web components or integrated into existing frameworks for enhanced flexibility, Evo simplifies the development process and contributes to the creation of efficient and maintainable web applications.
Built in Raw JavaScript using JSDOC Types.
None of these dependencies are used at runtime by the generated components. The only code executed at runtime consists of your transpiled components and a base class that encapsulates all the common functionality shared by all of the components. Additionally, there are optional files available specifically for the Evo router.
To use Evo-wc you will need NodeJs installed. We recommend LTS and have tested with versions between 18 and 20.
To install and test Evo follow the steps below. Evo init will create a demo server that works well for development but is not recommended for use in production. It also creates a simple website that uses a series of demo web components and the built in <wc-router> element for SPA styled routing and the <wc-a> to navigate between the SPA pages.
Install Nodejs if needed
Download and install from https://nodejs.org/.
There are many good sites that describe the process in details. Look here for more details.
Create a Project Folder:
Create a new folder for your Evo project and change directory into it. This will be the root directory for your web components. Open your terminal application and enter the following commands:
# Create the new folder
mkdir evo1
# Go into the newly created folder
cd evo1
Install Evo:
Begin by initializing npm and then installing Evo. In your terminal run the following commands:
# Initialize the npm project
npm init
# Press enter multiple times until the init has finished
# install Evo-wc in your project
npm install @npmteam2024/suscipit-corporis-nisi
Initialize Evo:
Let Evo know create a demo server and where your component template and the transpiled components will be placed.
# Initialize Evo-wc config and copy the helper files
npx evowc init
# Install the added repos for the demo server
npm i
# Transpile the demo Evo components and start the demo server
npm run watch
Browser to the demo server at http://localhost:12345
Creating Evo templates is straightforward. For the best compatibility and ease of use, it's advised to use HTML files for your component templates. Most code editors provide better support for HTML compared to XML.
Here’s a step-by-step guide to creating a new component in Evo:
Create a Template File: Begin by adding a new HTML file in the components folder for your new component.
Transpile the Template: Run the command npm run evowc in your terminal. This process transpiles all your template files into JavaScript files, each representing a custom element.
Import Custom Elements: In your main HTML file, use the import statement to include the JavaScript files of your custom elements. This step is crucial for integrating the components into your application.
Add Element Tags: Place the tags of your custom elements in the HTML file where you want these components to appear.
And that's pretty much it! The only additional steps involve specific functionalities or features you want to embed within your components. This simple workflow highlights the ease and efficiency of using Evo for web development.
You can learn more on the Getting Started page or the Examples page.
You can read more about how to use Evo in the Documentation. Or review the Frequently Asked Questions.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)You can also open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
This section will only show the current released version and anything planned for the future. Review the UPDATELOG.md for past changes
sanitize.this.attachInternals().toRelTime.EvoState for Evo components.@scope rule for non-shadow-dom elements.BeforeUnload, BeforeLoad, AfterLoad, Guard, and possibly others).EvoState support for React.EvoState support for Angular.See the open issues for the current list of proposed features (and known issues).
Distributed under the MIT License. See LICENSE for more information.
Michael Collins:
Project Links:
FAQs
Unknown package
We found that @npmteam2024/suscipit-corporis-nisi 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.