{"id":41668,"library":"octopusjs-framework","title":"OctopusJS","description":"OctopusJS (v1.8.6) is a high-performance, distributed intelligence frontend framework that lets developers build encapsulated components using pure HTML, CSS, and JavaScript. It adds no abstractions over native web APIs, resulting in near-vanilla JS performance (~54.8ms for 1k items) and a tiny 6.4kB gzipped footprint. Unlike traditional frameworks (React, Vue, Angular), OctopusJS distributes logic across Octopus Components with scoped styles and templates, has zero dependencies, and is compatible with any other library or backend. Release cadence is irregular; the package has been stable but not actively updated recently.","status":"active","version":"1.8.6","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","octopusjs","mcandeira"],"install":[{"cmd":"npm install octopusjs-framework","lang":"bash","label":"npm"},{"cmd":"yarn add octopusjs-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add octopusjs-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM import is required; CommonJS require is not supported.","wrong":"const Octopus = require('octopusjs-framework')","symbol":"Octopus","correct":"import { Octopus } from 'octopusjs-framework'"},{"note":"OctopusComponent is exported from a subpath; the main package exports only Octopus.","wrong":"import { OctopusComponent } from 'octopusjs-framework'","symbol":"OctopusComponent","correct":"import { OctopusComponent } from 'octopusjs-framework/component'"},{"note":"Also exported as default in older versions; prefer named export.","wrong":null,"symbol":"defineComponent","correct":"import { defineComponent } from 'octopusjs-framework'"}],"quickstart":{"code":"import { Octopus, defineComponent } from 'octopusjs-framework';\n\n// Define a custom component\nconst MyComponent = defineComponent({\n  name: 'my-component',\n  template: '<p>Hello Octopus!</p>',\n  style: 'p { color: blue; }',\n  script: () => {\n    console.log('Component mounted');\n  }\n});\n\n// Initialize Octopus with the component\nconst app = new Octopus({\n  components: [MyComponent]\n});\n\napp.init();\n\n// In HTML: <my-component></my-component>","lang":"typescript","description":"Shows how to define a custom OctopusJS component with template, style, and script, and initialize the framework."},"warnings":[{"fix":"Use import instead of require. If using Node.js, ensure 'type': 'module' in package.json or use .mjs extension.","message":"ESM-only package: OctopusJS is published as ES modules only. You cannot use require() to import it; you must use import syntax or configure your bundler accordingly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use named imports: import { Octopus, defineComponent } from 'octopusjs-framework'.","message":"Version 1.3.0 changed the default export to named exports. Older import patterns like `import Octopus from 'octopusjs-framework'` will break.","severity":"breaking","affected_versions":">=1.3.0"},{"fix":"Replace createComponent with defineComponent.","message":"The `createComponent` function was deprecated in v1.5.0 and removed in v1.6.0. Use `defineComponent` instead.","severity":"deprecated","affected_versions":">=1.5.0 <1.6.0"},{"fix":"Use at least one hyphen in the component name, e.g., 'my-component'.","message":"Component names must include a hyphen (kebab-case) as per web component specifications. OctopusJS enforces this and will throw an error otherwise.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only for browser environments. Avoid SSR-related tools or pre-rendering.","message":"OctopusJS does not support server-side rendering (SSR). It is purely client-side and relies on the DOM API at runtime.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1k':43 '54.8':40 '6.4':48 'abstract':28 'across':61 'activ':92 'add':26 'angular':57 'api':32 'backend':80 'build':16 'cadenc':82 'compat':74 'compon':18,63 'css':22 'depend':71 'develop':15 'distribut':9,59 'encapsul':17 'footprint':51 'framework':12,54 'frontend':11 'gzip':50 'high':7 'high-perform':6 'html':21 'intellig':10 'irregular':84 'item':44 'javascript':24,95 'js':38 'kb':49 'let':14 'librari':78 'logic':60 'mcandeira':97 'ms':41 'nativ':30 'near':36 'near-vanilla':35 'octopus':62 'octopusj':1,2,58,96 'packag':86 'perform':8,39 'pure':20 'react':55 'recent':94 'releas':81 'result':33 'scope':65 'stabl':89 'style':66 'templat':68 'tini':47 'tradit':53 'unlik':52 'updat':93 'use':19 'v1.8.6':3 'vanilla':37 'vue':56 'web':31 'zero':70","created_at":"2026-06-04T18:53:31.927323+00:00","updated_at":"2026-06-04T18:53:31.927323+00:00","problems":[{"fix":"Use named import: import { Octopus } from 'octopusjs-framework'","cause":"Using CommonJS require or incorrect import (e.g., default import on named export).","error":"TypeError: Octopus is not a constructor"},{"fix":"Rename component to include a hyphen, e.g., 'my-component'","cause":"Component name does not follow kebab-case convention required for web components.","error":"Error: Invalid component name. Must contain a hyphen."},{"fix":"Use named import: import { Octopus } from 'octopusjs-framework'","cause":"Using default import on a package that only exports named exports (since v1.3.0).","error":"Uncaught SyntaxError: The requested module 'octopusjs-framework' does not provide an export named 'default'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"octopusjs-framework","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}