Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
another-component-framework
Advanced tools
Package was removed
Sorry, it seems this package was removed from the registry
another-component-framework
A low level javascript framework for creating reusable web components
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-framework
Documentation
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 file
Your 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
See Also
Keywords
FAQs
A low level javascript framework for creating reusable web components
We found that another-component-framework 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.
Package last updated on 14 Nov 2020
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.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026