Molecular SDK

Generate the corresponding web page source code (TypeScript) with JSON configuration, and optional construction support.

How to install

# yarn
yarn add @molecularjs/builder
# npm
npm install @molecularjs/builder --save

Development

1. In the Molecularjs directory, clone project
2. Switch to branch dev/2.0
3. Installation dependencies yarn
4. Debug, need to rely on `@molecularjs/modules or other module warehouses

Introduction of directory structure

project
  |- bin #Command line tools
  |- demo # Based on SDK-based DEMO, it has been a long time, I don’t know if it can be run; it is recommended to use MCJ-MODULES to debug
  |- scripts
    |- build.ts # Demo's built -in script
    |- *.publish.js # Publishing script
  |- src
    |- assets
      |- index.ejs # Built -in HTMLWEBPACKPLUGIN template for generating the final page
    |- commands # Command line tools, including building modules, resolving functions such as generating bundles and starting previews
    |- environments # Environmental adaptation, SDK may be used for the environment of node and web (using DI to complete)
      |- base.ts # Architecture of the Basic Modules
      |- node.ts # Supplement in the Node environment (only available implementation in Node environment)
      |- web.ts # Supplement in the web environment (only available implementation in the web environment)
    |- generators # The AST generator part is used to generate AST structure related logic (universal does not depend on the environment)
      |- typings # Definition and maintenance here
      |- uses # Generate a variety of Helpers functions, which will complete specific functions at runtime
      |- utils # Auxiliary functions, these functions simplify the writing of some logical code during compilation
      |- builder.ts # Builder, complete the task of the output of a single module code
      |- bundler.ts # Binder, complete the task from JSON configuration to final entry file source code
      |- index.ts # The entrance is unified, and the internal open content can be exported from here
    |- providers # DI module to achieve various functions (perceive environment)
      |- compilers # Modules compiler, complete the conversion of modules from modules warehouse to NPM source code
      |- fs # The environmental adaptation of FS native module (Web environment is unimplemented)
      |- path # Path's native module environment adaptation (Web environment is unimplemented)
      |- prettier # The environment adaptation of the prettier module (Web environment is unimplemented)
      |- webpack # Environmental adaptation of the webpack module
        |- builder # Webpack core function (Web environment is invalid)
        |- plugins # Webpack related plug -in (Web environment is invalid)
        |- config.ts # Webpack Construction related configuration
        |- index.ts # Uniformly export, only the webpack module -related interface (abstract class) instead of implementation
      |- index.ts # Uniformly export, only export interfaces (abstract categories) instead of implementation
    |- utils # Some necessary auxiliary functions
    |- index.base.ts # General export, content that has nothing to do with the platform realization
    |- index.ts # The module of the node environment entry
    |- index.web.ts # WEB environment module entry
    |- package.d.ts # Package definition, providing support for development of Package in Namespace
    |- pipe.d.ts # PIPELINE definition, provides support for development of pipeline in namespace

Structure of config

{
  "name": "page01", // Name of this page
  "description": "xxx", // Description
  "packages": [ // Package list imported on the current page
    {
      "id": "GridFactory", // unique token
      "module": "molecularjs::basic-module", // Module package name, usually NPM package名
      "name": "layout/grid" // Module name is usually a relative path under NPM
    },
    {
      "id": "ButtonFactory",
      "module": "molecularjs::basic-module",
      "name": "button"
    },
  ],
  "functions": [ // Pipeline list imported by the current page lock
    {
      "id": "StructureAdaptorPipe", // Same as Package
      "module": "molecularjs::basic-module",
      "name": "structure-adaptor"
    }
  ],
  "page": { // The definition part of the page
    "root": "PageRootElement", // Page root node binding ID
    "states": [ // Collection of page state
      {
        "name": "ClickData", // The unique state key
        "data": { "value": false } // The initial value must be Object
      },
    ],
  },
  "instances": [ // Package or pipeline instance collection
  // PIPELINE and Package can be considered as high -order functions, which are factory methods for UI components and pure functions
  // Package instantiated to generate React components, pipeline instantiation generates pure function
    {
      "ref": "StructureAdaptorPipe", // The ID of the cited HOC
      "id": "StructureAdaptor01", // Instance name, that is, the variable name of the component or pure function in the final code, you need to pay attention to the format
      "inputs": { // input Params
        "basic": { // Group name of inputs params
          "expressions": { // The structure of the parameter value
            "type": "literal", // The type of parameter value only supports the LITERAL for the time being, and the subsequent extension is considered
            "value": { // Value
                "1": "$out.value=!$in.value"
            }
          }
        }
      }
    },
    { // Same
      "ref": "StructureAdaptorPipe",
      "id": "StructureAdaptor02",
      "inputs": {
        "basic": {
          "expressions": {
            "type": "literal",
            "value": {
              "1": "$out.text=$in.value?'OPEN':'CLOSE'"
            }
          }
        }
      }
    },
    { // Same
      "ref": "ButtonFactory",
      "id": "Button01",
      "inputs": {
        "basic": {
          "text": { "type": "literal", "value": "XXXXXX" },
          "rectangle": { "type": "literal", "value": true }
        }
      }
    },
    { // Same
      "ref": "GridFactory",
      "id": "Grid01",
      "inputs": {
        "basic": {
          "backgroundColor": { "type": "literal", "value": "#fea500" },
          "width": { "type": "literal", "value": "100vw" },
          "height": { "type": "literal", "value": "100vh" }
        },
        "grid": {
          "rows": { "type": "literal", "value": 4 },
          "columns": { "type": "literal", "value": 4 },
          "rowFrs": { "type": "literal", "value": { "1": "1", "2": "1", "3": "2", "4": "2" } },
          "columnFrs": { "type": "literal", "value": { "1": "2", "2": "1", "3": "3", "4": "2" } }
        }
      }
    },
  ],
  "bindings": [ // Binding is the syntax of all Instances, bindings that construct nested IDs, and can eventually be rendered into ElementTree
    {
      "id": "ButtonElement01", // Binding ID, unique
      "host": "Button01", // Instance used
      "slots": {// The slot (if Package is defined), you can fill in other binding, nested and parsed into the last ElementTree
      // The type of slot can be array (anonymous array, order rendering) or key-value (name slot)
      // The content temporarily only supports Binding and Generator (very complicated to support dynamic rendering high -end functions to achieve dynamic Inputs, and the performance is poor. It is recommended to use it only in the limited scenario, such as: the rendering of the UI in the ROW of Table)
      // When Type = Binding, Host needs to fill in the corresponding binding ID
      // When Type = Generator, you need to provide Rules (very complicated and recursive nested in the current Dynamic statement. It is still in the early development stage. It is not described for the time being. )
        "state": {
          "type": "state", // Slot type, supports state
          "rules": { // When the slot is state, you need to give Rules parsing rules
          // Rules can be array (multiple states) and Object
          // If you want to aggregate multiple states, please make an article in the host part, please refer to the configuration below
            "host": "ClickData",
            // If you want to aggregate multiple data sources, use the following writing:
            // "hosts": { "data1": "ClickData", "data2": "ClickData" },
            "pipes": { // Support to provide pure functions to process data streams
            // Support two data popularity: Watch, Update
            // Watch: When the data stream changes is, the sequentially executes a given pure function, which is accepted by the component logic after obtaining the final result, including Subscribe and Usestate
            // Update: When the behavior of the data source update is about to occur, the sequentially executes a given pure function set, and the data source is updated after the final result is obtained
              "watch": ["StructureAdaptor02"]
            }
          }
        },
        "onclick": { // Same
          "type": "state",
          "rules": {
            "host": "ClickData",
            "pipes": {
              "update": ["StructureAdaptor01"]
            }
          }
        }
      }
    },
    { // Same
      "id": "PageRootElement",
      "host": "Grid01",
      "attaches": { // The additional attribute (if the Package is defined), it is used to limit the behavior of the members in each slot in the current component
        "ButtonElement01": {
          "grid": {
            "rowStart": 1,
            "rowSpan": 4
          }
        },
      },
      "slots": [
        { "type": "binding", "host": "ButtonElement01" },
      ]
    }
  ]
}