@circular/components
Advanced tools
Readme
Components is a simple web component library that was written as part of the Circular Framework. Underneath it is leveraging @circular/templation for html template syntax and data binding.
npm install @circular/components --save
Currently, the components library is made up of just a class decorator that can be used to create a new HTML5 web component. Simply decorate your own class with the CircularComponent decorator and configure it properly. This will register a new web component for use in your web application. The properties and methods of your class will be bound to the newly created component.
One important piece is the circular-loader webpack loader. Upon compiling your code with webpack this loader will search your components for refererences to files in the templateUrl and styleUrl decorator configurations, and will replace them with require statements. See the webpack.config.js file in this project to see how it is used. Essentially you'll want to use the circular-loader after the babel-loader.
import { CircularComponent } from '@circular/components';
@CircularComponent({
selector: 'my-component',
templateUrl: './my-component.component.html',
styleUrl: './my-component.component.css',
attributes: ['name']
})
export class MyComponent {
constructor() {
/** public properties */
this.name = '';
this.data = [
{ 'id': 0, 'name': 'John Doe', age: 38, selected: true },
{ 'id': 1, 'name': 'Jane Doe', age: 38, selected: true }
];
}
changeValue() {
let name = prompt('Enter A Name');
this.data[0].name = name;
}
}
<div>
<slot></slot>
<div crFor="d in data">
Hello! My name is {{d.name}} and I am {{d.age}} years old.
</div>
<button crOn:click="changeValue()">
Update
</button>
</div>
NOTE: The styles can be either CSS or SCSS.
:host {
position: absolute;
top: 75px;
left: 25px;
background-color: #E6E6E6;
padding: 50px;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<my-component name="Test Component"></my-component>
</body>
</html>
This decorator will bring together a class with a component and bind the properties and methods from the class to the new component. The decorator takes in a configuration object. The configuration object must specify either a template or templateUrl value.
FAQs
Components is a simple web component library that was written as part of the Circular Framework. Underneath it is leveraging @circular/templation for html template syntax and data binding.
The npm package @circular/components receives a total of 0 weekly downloads. As such, @circular/components popularity was classified as not popular.
We found that @circular/components demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.