GithubHelp home page GithubHelp logo

dataformsjs / dataformsjs Goto Github PK

View Code? Open in Web Editor NEW
179.0 8.0 22.0 4.38 MB

🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

Home Page: https://www.dataformsjs.com/

License: MIT License

JavaScript 93.05% HTML 6.74% CSS 0.21%
javascript-framework react-components web-components dataformsjs javascript handlebars vue playground handlebarsjs spa

dataformsjs's Issues

remove hashtag from url?

if i have root url / then /data for data page. in example, i need to move to #/data instead of /data. is it possible to remove it? i think spa can have pretty url without hashtag

Confusing documentation on use of import statement

I'm trying to migrate from babel to jsxLoader and I'm very confused about my ability to use import statements. The homepage indicates in the first example code block that it is possible by using data-type='module', but when I try the following I get an error about using the import statement outside a module.

<!doctype html>
<html lang="en">
    <body>
        <div id="root" dir="auto"></div>
        
        <script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/react/jsxLoader.min.js"></script>  

        <script type="text/babel" data-type="module">
            import Gallery from 'gallery'
        </script>

    </body>
</html>

I'm similarly confused as to whether there is a method to allow use of export within a component.

Can not debug when using jsx loader

Hi @ConradSollitt,

First of all thank you so much for building this awesome 20k library (babel standalone 2m) so developing react app without built tools is a breeze, highly appreciated!!!

I noticed a difference that the react jsx(or js) file was not shown in chrome dev tools when using jsx loader instead of babel, so debugging is not possible. See attached screenshots.
jsxloader
babel

This is the test project to reproduce this issue. Clone the project, run npm install, and test the two links in chrome:

Thanks again for your great work, look forward to your response. :-)

Best,
Yang

Add Support for Vue 3

DataFormsJS currently only works with Vue 2 and not yet the beta version of Vue 3. This is now in active development but not yet fully working. Once DataFormsJS supports both Vue 2 and Vue 3 then changes will be published to npm and CDN's.

If you would like to help with this feel free to ask questions here. No build process is needed and using browser DevTools is recommended as the main DataFormsJS framework is in a single JS file and Vue 3 downloads to a single un-minimized file as well.

Since Vue 3 is still in beta there is no timeline for this but hopefully it will be ready soon.

Currently all affected code has TODO comments.

Vue 3 (Beta)
https://github.com/vuejs/vue-next

DataFormsJS Fork for Vue 3 Development
Once ready this will be sent via pull request to the main project (or files will simply be copied)
https://github.com/ConradSollitt/dataformsjs

Example of changes needed
ConradSollitt@c4e4559

jsxLoader: Uncaught SyntaxError: Unexpected token ',' 

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/react/jsxLoader.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  </head>
  <body>
    <script data-type="module" type="text/babel">
      console.log(
        <div>
          <div />
          {[].map(() => <div />)}
        </div>
      );
    </script>
  </body>
</html>

gives error

lovejoy.html:5 Uncaught SyntaxError: Unexpected token ','
    at addToPage (jsxLoader.js:389)
    at jsxLoader.js:396
    at new Promise (<anonymous>)
    at Object.loadScript (jsxLoader.js:393)
    at Object.setup (jsxLoader.js:273)
    at HTMLDocument.<anonymous> (jsxLoader.js:1715)
addToPage @ jsxLoader.js:389
(anonymous) @ jsxLoader.js:396
loadScript @ jsxLoader.js:393
setup @ jsxLoader.js:273
(anonymous) @ jsxLoader.js:1715

wrong compile result in jsx

source

const Ob = (props) => {

  return <div>{props.r()}</div>
}

const App = () => {
  return <h2>
    hello
    <Ob r={() => {
      return <h1>zzzz</h1>
    }}/>
  </h2>
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

output:

"use strict";
const Ob = (props) => {

  return React.createElement("div", null, props.r())
}

const App = () => {
  return React.createElement("h2", null, "hello\r\n    ", 
            React.createElement(Ob, {r: true},    // =================> why ?
                React.createElement("h1", null, "zzzz")))
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('root')
);

Add an API to JSX Loader

Hello!

What an incredible product you have here.
I know forms are a pain to produce, and this will help.

What caught my eye more than anything is the jsxLoader.

I really like it and would love to use it to make react-styleguidist faster.

  • Do you think it could be made into a separate npm package?
  • Do you think one could ask for a specific pragma to package the jsx?
    • for mercurial it's mercurial.h, for vue simply h
  • Most importantly, do you think that this transformation could be done without running the code?

I was thinking of an api like this

import { transform } from '@dataformjs/jsx-loader'

const desugarizedCode = transform('<Comp>hello mama</Comp>', {pragma: 'h'})
console.log(desugarizedCode)
// "h(Comp, , ['hello mama'])"

jsxLoader: Less than operator assumed to be an open element 

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/react/jsxLoader.min.js"></script>
  </head>
<body>
    <script type="text/babel" data-type="module">
      const n = 2;
      1<n;
    </script>
  </body>
</html>

jsxLoader.min.js:5 Error: The number of opening elements (for example: "<div>") does not match the number closing elements ("</div>").
    at Object.parser (jsxLoader.min.js:5)
    at Object.compile (jsxLoader.min.js:5)
    at r (jsxLoader.min.js:5)
    at jsxLoader.min.js:5
    at new Promise (<anonymous>)
    at Object.loadScript (jsxLoader.min.js:5)
    at Object.setup (jsxLoader.min.js:5)
    at HTMLDocument.<anonymous> (jsxLoader.min.js:5)
r @ jsxLoader.min.js:5
(anonymous) @ jsxLoader.min.js:5
loadScript @ jsxLoader.min.js:5
setup @ jsxLoader.min.js:5
(anonymous) @ jsxLoader.min.js:5

Perhaps it's best to skip this test altogether?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.