domvm-jsx

This package supplies the el function defined in the using JSX with domvm wiki.

Using domvm and JSX

While not all of domvm's features can be accommodated by JSX syntax, it's possible to cover a fairly large subset via a defineElementSpread pragma. Please refer to demos and examples in the JSX wiki.

Quick start

• install via npm/yarn

  npm install domvm-jsx --save

Combining domvm and JSX with webpack and babel

• package.json

  ...
  
  "devDependencies": {
      "webpack": "^3.8.1",
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.1",
      "babel-plugin-transform-react-jsx": "^6.24.1"
  },
  "dependencies": {
      "domvm": "^3.3.3",
      "domvm-jsx": "^1.0.0"
  }
  
  ...

• webpack.config.js

  ...
  
  module: {
      loaders: [
          {
              test: /\.(jsx|js)$/,
              loader: ['babel-loader']
          }
      ]
  }
  
  ...

• babel.rc

  {
      "presets": [
          "env"
      ],
      "plugins": [
          [
              "transform-react-jsx",
              {
                  "pragma": "el"
              }
          ]
      ]
  }

• your-project-file.js

  ...
  
  // jsx entry function
  const el = require('domvm-jsx');
  
  // define a component to be included via JSX (*note that components must start with a capital to differentiate them from element tags)
  const Component = (vm) => {
  
      return (vm) => {
  
          return (
              <div>{vm.data.step}{vm.data.children}</div>
          );
      };
  };
  
  // create a view using JSX and bind component
  const view = function (vm) {
      let step = 0;
  
      setInterval(() => {
          step = step +1;
          vm.redraw();
      }, 1000);
  
      return function() {
  
          /* has own content */
          return (
              <div>
                  {/* includes the component as a child */}
                  <Component
                    name='foo'
                    step={step}
                  >
                      <div>I'm a child</div>
              </div>
          );
      };
  };
  
  // create a vm from the view
  const vm = domvm.createView(view);
  
  // mount to the dom
  vm.mount(document.getElementById('root'));
  
  ...
  

Acknowledgements

• Leon Sorokin (leeoniya) - Author of domvm
• John Long (iamjohnlong)
• Fred Daoud (foxdonut)

See discussion here

License

• Licensed under the MIT License (MIT).