Package Exports

frag-components
frag-components/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (frag-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Frag Components

The perfect library to create SPA (Single Page Applications)

For Developers

1 - Starting a new app using npx:

  npx create-frag-app my-app

2 - Read the docs: Frag Components Wiki for developers

Example

import { jsx, fragment, FragComponent, virtualDOM } from "frag-components";

class App extends FragComponent {
  render() {
    return (
      <div id="app">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

const Root = new App();

virtualDOM.render(Root);

For Contributors

Frag Components is a Open Source library and you can be a contributor

1 - Use the GitHub issues to report bugs and fixes:

Frag Components Issues

2 - See the contributors docs

See the Frag Components Wiki: Frag Components Wiki for contributors

Getting Started

1- Clone the repo

  git clone https://github.com/IgorSprovieri/frag-components.git

2- Install dependecies:

npm install

3- Create dist/index.html file:

<!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></body>
  <script src="bundle.js"></script>
</html>

4- Create .babelrc file:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "jsx",
        "pragmaFrag": "fragment"
      }
    ]
  ]
}

5- Create webpack.config.js file:

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./test/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "dist"),
        publicPath: "/",
      },
    ],
    compress: true,
    port: 3000,
  },
};

6- Create test/index.js file:

import { jsx, fragment, FragComponent, virtualDOM } from "../index";

class App extends FragComponent {
  render() {
    return <></>;
  }
}

const Root = new App();

virtualDOM.render(Root);

7- Build the project

npm run build

8- Start the project

npm run start