DOCSEARCHbyAlgolia
Submit Docs

Costro

website·Indexed 30 days ago

https://costro.js.org

A lightweight framework for building web applications featuring components, a store, and a router. It supports native template strings and JSX for component templates and can be integrated via CDN or installed using create-costro-app.

Tokens
4.2K
Snippets
36
Records
42
Agent score
50%

What's inside Costro

  1. Overview of Costro framework features

    Costro is a lightweight (3 KB) JavaScript framework designed for high-performance web applications. It targets modern browsers (Chrome, Firefox, Edge, Safari, Opera) and provides the following core capabilities:

    • Components: Support for both function and class components.
    • Router: Ability to map components to specific routes.
    • Store: Global state management accessible from any component.
    • Lifecycle Hooks: Component lifecycle event management.
    • Props: Dependency/data injection into components.
    • Template Syntax: Support for native Template Strings and JSX.
    • JSX Compiler: A 1 KB compiler that transforms JSX into valid DOM elements.
    • CLI: An interactive command-line interface for rapid project scaffolding.

  2. Configure History mode for clean URLs

    By default, Costro uses hash mode (e.g., /#/about). To use clean URLs (e.g., /about), set mode: 'history' in the App configuration. This requires server-side configuration to redirect all non-static requests to index.html.
    const app = new App({
  mode: 'history',
  target: document.querySelector('#app'),
  routes: []
});

  3. Pass and use props in components

    Props are input data injected into components. In function components, props are passed as the first argument. In class components, they are accessed via this.props. Components can be nested, and props are passed to child components via JSX attributes.
    // Child Component
class Person extends Component {
  render() {
    return <h2>Hello, {this.props.name}</h2>;
  }
}

// Parent Component
class Home extends Component {
  render() {
    return <Person name="John Doe" />;
  }
}

  4. Install Costro via npm

    To use Costro in your project, ensure Node.js is installed and run the npm installation command in your terminal.
    npm install costro

  5. Run Costro in the browser using CodeSandbox

    Costro provides CodeSandbox playgrounds that allow developers to run and test Costro in a remote Docker container directly in the browser. This eliminates the need for local installation and is specifically useful for testing the library or reproducing bugs for reports.
    https://codesandbox.io/s/costro-x8j4f

  6. Configure browser targets with Browserslist

    Costro templates include a browserslist configuration in package.json to define which browsers the project supports for production and development. This should be updated based on your specific project requirements.
    "browserslist": {
  "production": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

  7. Handle state changes and DOM updates manually

    Costro does not use a virtual DOM diffing algorithm. To update the UI when state changes, you must manually update the DOM elements. This approach is designed for performance and predictability.
    class Counter extends Component {
  constructor(props) {
    super(props);
    this.counter = 0;
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Clicks: <span id="counter">{this.counter}</span>
      </button>
    );
  }

  handleClick() {
    this.counter++;
    // Manually update the DOM element
    document.getElementById('counter').textContent = this.counter;
  }
}

  8. Initialize the Costro application instance

    Create a new App instance by providing a configuration object. The target property specifies the DOM element where the app will be mounted, and routes provides the routing configuration.
    const app = new App({
  target: document.querySelector('#app'),
  routes
});

  11. Integrate Costro using a CDN

    Include Costro in your project by adding a <script> tag pointing to the jsDelivr CDN. When loaded this way, the library is registered as a global variable on the window.Costro object.
    <script src="https://cdn.jsdelivr.net/npm/costro" crossorigin></script>

  12. Configure Babel for Costro JSX

    To transpile JSX, install @babel/preset-react. You can use the automatic runtime to automatically handle imports from costro, or use classic pragmas if using CDN links via window.Costro.jsx.
    npm install @babel/preset-react --save-dev

    // babel.config.json (Automatic Runtime) { "presets": [ [ "@babel/preset-react", { "runtime": "automatic", "importSource": "costro" } ] ] }

    // babel.config.json (CDN Pragmas) { "pragma": "Costro.jsx.h", "pragmaFrag": "Costro.jsx.F" }