0.0.7 update + Fragment added + code refactored

README.md

@@ -32,7 +32,8 @@ export default withTemplating(MyComponent);
 - Use Wrapper HTML tags
 
 ```jsx
-import { Div, P, Button, Br, Span } from 'react-jsx-templating'; // Note: named import. There are total 118 Elements
+// Note: named import. There are total 118 Elements
+import { Fragment, Div, P, Button, Br, Span } from 'react-jsx-templating';
 ```
 
 ## Syntax
@@ -98,7 +99,7 @@ function ExampleSwitchCase() {
 
 ```jsx
 import React, { Component } from 'react';
-import { Div, P, Button, Br } from 'react-jsx-templating';
+import { Div, Fragment, Button, Br } from 'react-jsx-templating';
 import { EnglishNewsPaper, SpanishNewsPaper } from './Components';
 
 class ExampleIfElse extends Component {
@@ -114,9 +115,9 @@ class ExampleIfElse extends Component {
     const { isEngLang } = this.state;
     return (
       <div>
-        <P $if={isEngLang} $else={<p>Hola!</p>}>
+        <Fragment $if={isEngLang} $else={<>Hola!</>}>
           Hello!
-        </P>
+        </Fragment>
         <EnglishNewsPaper $if={isEngLang} $else={SpanishNewsPaper} />
         <Button onClick={this.toogleLanguage}>Toggle Language</Button>
       </div>
@@ -145,6 +146,7 @@ function ExampleForLoop() {
 
 - ~~Switch Case~~ (added)
 - ~~Loop~~ (added)
+- ~~Fragment~~ (added)
 
 ## License
 

example/package.json

@@ -8,13 +8,19 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "react-jsx-templating": "link:.."
+    "react-jsx-templating": "link:..",
+    "react-scripts": "^2.1.8"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

example/src/components/IfElse.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Div, P, Button, Br, Span } from 'react-jsx-templating';
+import { Div, P, Button, Br, Fragment } from 'react-jsx-templating';
 import MySomeComponent from './Helper/MySomeComponent';
 
 function IfElse() {
@@ -15,9 +15,9 @@ function IfElse() {
         Welcome here
       </MySomeComponent>
       <Button onClick={() => setShowToggler(v => !v)}>
-        <Span $if={!showToggler} $else={<Span>Hide Toggler</Span>}>
+        <Fragment $if={!showToggler} $else={<>Hide Toggler</>}>
           Show Toggler
-        </Span>
+        </Fragment>
       </Button>
       <Br $if={showToggler} />
       <Button $if={showToggler} onClick={() => setShow(v => !v)}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jsx-templating",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React Jsx Templating, inspired by Angular :)",
   "author": "ritwickdey",
   "license": "MIT",

src/index.js

@@ -1,125 +1,4 @@
 import withTemplating from './lib/withTemplating';
-import Elements from './lib/Elements';
+export * from './lib/Elements';
 
 export default withTemplating;
-
-export const {
-  A,
-  Abbr,
-  Address,
-  Area,
-  Article,
-  Aside,
-  Audio,
-  B,
-  Base,
-  Bdi,
-  Bdo,
-  Blockquote,
-  Body,
-  Br,
-  Button,
-  Canvas,
-  Caption,
-  Cite,
-  Code,
-  Col,
-  Colgroup,
-  Data,
-  Datalist,
-  Dd,
-  Del,
-  Details,
-  Dfn,
-  Dialog,
-  Div,
-  Dl,
-  Dt,
-  Em,
-  Embed,
-  Fieldset,
-  Figcaption,
-  Figure,
-  Footer,
-  Form,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Head,
-  Header,
-  Hgroup,
-  Hr,
-  Html,
-  I,
-  Iframe,
-  Img,
-  Input,
-  Ins,
-  Kbd,
-  Keygen,
-  Label,
-  Legend,
-  Li,
-  Link,
-  Main,
-  Map,
-  Mark,
-  Math,
-  Menu,
-  Menuitem,
-  Meta,
-  Meter,
-  Nav,
-  Noscript,
-  Object,
-  Ol,
-  Optgroup,
-  Option,
-  Output,
-  P,
-  Param,
-  Picture,
-  Pre,
-  Progress,
-  Q,
-  Rb,
-  Rp,
-  Rt,
-  Rtc,
-  Ruby,
-  S,
-  Samp,
-  Script,
-  Section,
-  Select,
-  Slot,
-  Small,
-  Source,
-  Span,
-  Strong,
-  Style,
-  Sub,
-  Summary,
-  Sup,
-  Svg,
-  Table,
-  Tbody,
-  Td,
-  Template,
-  Textarea,
-  Tfoot,
-  Th,
-  Thead,
-  Time,
-  Title,
-  Tr,
-  Track,
-  U,
-  Ul,
-  Var,
-  Video,
-  wbr
-} = Elements;

src/lib/Elements.js → src/lib/Elements/DOMElements.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { HTML_TAGS } from './html-tags';
-import withTemplating from './withTemplating';
+import { HTML_TAGS } from '../utils/html-tags';
+import withTemplating from '../withTemplating';
 
-export const Elements = {};
+const DOMElements = {};
 
 HTML_TAGS.forEach(tag => {
   const Fn = props => {
@@ -11,11 +11,11 @@ HTML_TAGS.forEach(tag => {
   };
   const Tag = capitalCase(tag);
   Fn.displayName = Tag;
-  Elements[Tag] = withTemplating(Fn);
+  DOMElements[Tag] = withTemplating(Fn);
 });
 
 function capitalCase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export default { ...Elements };
+export default DOMElements;

src/lib/Elements/Fragment.js

@@ -0,0 +1,7 @@
+import withTemplating from "../withTemplating";
+
+const Fragment = ({ children }) => {
+  return children;
+};
+
+export default withTemplating(Fragment);

src/lib/Elements/index.js

@@ -0,0 +1,123 @@
+import DOMElements from './DOMElements';
+export { default as Fragment } from './Fragment';
+
+export const {
+  A,
+  Abbr,
+  Address,
+  Area,
+  Article,
+  Aside,
+  Audio,
+  B,
+  Base,
+  Bdi,
+  Bdo,
+  Blockquote,
+  Body,
+  Br,
+  Button,
+  Canvas,
+  Caption,
+  Cite,
+  Code,
+  Col,
+  Colgroup,
+  Data,
+  Datalist,
+  Dd,
+  Del,
+  Details,
+  Dfn,
+  Dialog,
+  Div,
+  Dl,
+  Dt,
+  Em,
+  Embed,
+  Fieldset,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hgroup,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Keygen,
+  Label,
+  Legend,
+  Li,
+  Link,
+  Main,
+  Map,
+  Mark,
+  Math,
+  Menu,
+  Menuitem,
+  Meta,
+  Meter,
+  Nav,
+  Noscript,
+  Object,
+  Ol,
+  Optgroup,
+  Option,
+  Output,
+  P,
+  Param,
+  Picture,
+  Pre,
+  Progress,
+  Q,
+  Rb,
+  Rp,
+  Rt,
+  Rtc,
+  Ruby,
+  S,
+  Samp,
+  Script,
+  Section,
+  Select,
+  Slot,
+  Small,
+  Source,
+  Span,
+  Strong,
+  Style,
+  Sub,
+  Summary,
+  Sup,
+  Svg,
+  Table,
+  Tbody,
+  Td,
+  Template,
+  Textarea,
+  Tfoot,
+  Th,
+  Thead,
+  Time,
+  Title,
+  Tr,
+  Track,
+  U,
+  Ul,
+  Var,
+  Video,
+  wbr
+} = DOMElements;

src/lib/helpers/doIfElseOperation.js → src/lib/helperFns/doIfElseOperation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { isTrusy } from './utils';
+import { isTrusy } from '../utils';
 
 export function doIfElseOperation(props, Component) {
   const { $if: condition, $else: elseBlock, ...restProps } = props;

src/lib/helpers/doSwitchCaseOperation.js → src/lib/helperFns/doSwitchCaseOperation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { isTrusy, isUndefined } from './utils';
+import { isTrusy, isUndefined } from '../utils';
 
 export function doSwitchCaseOperation(props, Component) {
   const { $switch: switchValue, children, ...restProps } = props;

src/lib/helperFns/index.js

@@ -0,0 +1,3 @@
+export { doIfElseOperation } from './doIfElseOperation';
+export { doSwitchCaseOperation } from './doSwitchCaseOperation';
+export { doForLoopOperation } from './doForLoopOperation';