1.0.3 • Published 3 years ago
another-component-framework v1.0.3
Another Component Framework
A low level javascript framework for creating reusable web components
Super Lightweight (< 1kb compressed)
Contents
Usage
CDN
You can use unpkg
NPM
npm install another-component-frameworkDocumentation
See documentation at jessebotx.github.io/AnotherComponentFramework
Example
Without creating a class
ExampleComponent.js
import Component from "another-component-framework";
new Component(
"#example",
`
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
`
);Creating a class
ExampleComponent.js
import Component from "another-component-framework";
class ExampleComponent extends Component {
constructor() {
super(
"#example", // inject html below into element with id = "example" ( this gets passed into document.querySelectorAll() )
`
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
`
);
}
}
new ElementComponent(); // create component here
// additionally, you can export ElementComponent and then call new ElementComponent() in a different fileYour HTML file(s)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="example"></div>
<script src="ExampleComponent.js"></script>
</body>
</html>Changelog
v1.0.3
- Fixed bug in code
v1.0.2
- TypeScript support
License
0BSD License