@maka/maka-cli 3.3.67 → 4.0.72

package/dist/templates/meteor/stylesheet/stylesheet.css

@@ -0,0 +1,5 @@
+/*****************************************************************************/
+/* <%= name %>: Style */
+/*****************************************************************************/
+.<%= name %> {
+}

package/dist/templates/meteor/stylesheet/stylesheet.css.less

@@ -0,0 +1,5 @@
+/*****************************************************************************/
+/* <%= name %>: Style */
+/*****************************************************************************/
+.<%= name %> {
+}

package/dist/templates/meteor/template/template-tests.js

@@ -0,0 +1 @@
+

package/dist/templates/meteor/template/template-tests.js.jsx

@@ -0,0 +1,55 @@
+import { Meteor } from 'meteor/meteor';
+
+import React from 'react';
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+if (Meteor.isClient) {<% if(graphql === 'apollo' && !isStore) { %>
+  import { MockedProvider } from '@apollo/react-testing';
+  import gql from 'graphql-tag';
+  const mocks = [
+    {
+      request: {
+        query: gql`query { trucks }`, // consider importing the query from the actual component
+        variables: {
+          sample: 'variable'
+        },
+      },
+      result: {
+        data: {
+          trucks: 'hello trucks'
+        }
+      }
+    }
+  ];
+  <% } %>
+  let container = null;
+  beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  const { <%=className%>%> } = require('./<%= fileName %>');
+  describe('<<%= className %>/>', function() {
+
+   it('did render', () => {
+     act(() => {<% if(graphql === 'apollo' && !isStore) { %>
+       render(
+          <MockedProvider mocks={mocks} addTypename={false}>
+           <<%= className %>/>
+         </MockedProvider>
+       );<% } else { %>
+       render(<<%= className %>/>, container);<% } %>
+     });
+     expect(container.textContent).toBe("Find me in <%= myPath %>");
+    });
+  });
+}

package/dist/templates/meteor/template/template-tests.js.ts

@@ -0,0 +1 @@
+

package/dist/templates/meteor/template/template-tests.js.tsx

@@ -0,0 +1,55 @@
+import { Meteor } from 'meteor/meteor';
+
+import * as React from 'react';
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+if (Meteor.isClient) {<% if(graphql === 'apollo' && !isStore) { %>
+  import { MockedProvider } from '@apollo/react-testing';
+  import gql from 'graphql-tag';
+  const mocks = [
+    {
+      request: {
+        query: gql`query { trucks }`, // consider importing the query from the actual component
+        variables: {
+          sample: 'variable'
+        },
+      },
+      result: {
+        data: {
+          trucks: 'hello trucks'
+        }
+      }
+    }
+  ];
+  <% } %>
+  let container = null;
+  beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  const { <%=className%>%> } = require('./<%= fileName %>');
+  describe('<<%= className %>/>', function() {
+
+   it('did render', () => {
+     act(() => {<% if(graphql === 'apollo' && !isStore) { %>
+       render(
+          <MockedProvider mocks={mocks} addTypename={false}>
+           <<%= className %>/>
+         </MockedProvider>
+       );<% } else { %>
+       render(<<%= className %>/>, container);<% } %>
+     });
+     expect(container.textContent).toBe("Find me in <%= myPath %>");
+    });
+  });
+}

package/dist/templates/meteor/template/template.css

@@ -0,0 +1,6 @@
+/*****************************************************************************/
+/* <%= className %>: Style */
+/*****************************************************************************/
+<% if (isComponent) { %>#<%= cssCaseName %>-component {<% } else { %>#<%= cssCaseName %> {<% } %>
+
+}

package/dist/templates/meteor/template/template.css.less

@@ -0,0 +1,6 @@
+/*****************************************************************************/
+/* <%= cssCaseName %>: Style */
+/*****************************************************************************/
+<% if (isComponent) { %>#<%= cssCaseName %>-component {<% } else { %>#<%= cssCaseName %> {<% } %>
+
+}

package/dist/templates/meteor/template/template.html

@@ -0,0 +1,5 @@
+<template name="<%= className %>">
+  <div id="<%= cssCaseName %>">
+    <h1>Find me in <%= myPath %></h1>
+  </div>
+</template>

package/dist/templates/meteor/template/template.js

@@ -0,0 +1,20 @@
+<% if (client === 'vanilla') { %>import '/imports/ui/layouts/master-layout/master-layout';
+<% if (isComponent) { %>class <%= className %>Component {<% } else { %>class <%= className %>Page {<% } %>
+  constructor() {
+    this.text = `<h2>Find me in <%= myPath %></h2>`;
+    this.render();
+  }
+
+  markup() {
+    return `
+      <% if (isComponent) { %><div id="<%= cssCaseName %>-component">${this.text}</div><% } else { %><div id="<%= cssCaseName %>-page">${this.text}</div><% } %>
+    `;
+  }
+
+  render() {<% if (isComponent) { %>
+    $('#<%= cssCaseName %>').html(this.markup());<% } else { %>
+    $('#master-layout').html(this.markup());<% } %>
+  }
+}
+
+<% if (isComponent) { %>export default <%= camelCaseName %>Component = new <%= className %>Component();<% } else { %>export default <%= camelCaseName %>Page = new <%= className %>Page();<% } %>

package/dist/templates/meteor/template/template.js.jsx

@@ -0,0 +1,77 @@
+import { compose } from 'ramda'; // https://ramdajs.com/docs/#compose
+<% if (client === 'react') { %>import React, { Component } from 'react';<% } else if (client === 'reflux') { %>
+import React from 'react';
+import PropTypes from 'prop-types';<% if ( isStore ) { %>
+import { Store } from 'reflux'; <% } else { %>
+import { Component } from 'reflux';<% } %><% } %>
+// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#withtrackerreactivefn-higher-order-component
+import { withTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+import { gql } from '@apollo/client';
+// https://www.apollographql.com/docs/react/api/react/hoc/#graphqlquery-configcomponent
+import { graphql } from '@apollo/client/react/hoc';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { withStyles } from '@mui/styles';
+
+const styles = (theme) => { };<% } %>
+<% if (!isStore) { %>
+class <%= className %>Component extends Component {<% } else { %>
+class <%= className %>Component extends Store { <% } %><% if (client === 'reflux' && isStore) { %>
+  constructor() {
+    super();
+    this.state = {};
+  }<% } else { %>
+  /**
+   * Define types for your props for stability.
+   */
+  static propTypes = {};
+
+  /**
+   * If a prop is not required, it is a good idea to provide
+   * it a default value
+   */
+  static defaultProps = {};
+
+  /**
+   * Setup the component.  Best practices are to keep this light,
+   * and offload complex behavior to methods.
+   */
+  constructor(props) {
+    super(props);
+    this.state = {};<% if (client === 'reflux') { %>
+    this.stores = [];
+    this.storeKeys = [];<% } %>
+  }<% } %>
+
+  /**
+   * This method runs after the component output has been rendered to the DOM.
+   * This is where you can start to interact with HTML elements, such as <div>,
+   * or attach event listeners to DOM elements.
+   */
+  componentDidMount() { }
+
+  /**
+   * This is where the DOM will be torn down.  A good idea is to clean up any
+   * event listeners you've created in the componentDidMount() method.
+   */
+  componentWillUnmount() {<% if (client === 'reflux' && !isStore) { %> super.componentWillUnmount();<% }%> }
+
+  /**
+   * This is the main render method, and will rerun anytime either this.state or this.props is changed.
+   */
+  render() {<% if (isStore) { %>
+    return null;<% } else { %>
+    return (
+      <div id="<% if (isComponent) { %><%= cssCaseName %>-component<% } else { %><%= cssCaseName %><% } %>">
+        <h2>Find me in <%= myPath %></h2>
+      </div>
+    );<% } %>
+  }
+}
+
+const <%= className %> = compose(
+  withTracker(() => {}),<% if(graphql === 'apollo') { %>
+  //graphql(gql`query Todos { todos }`, { variables: {/* input */} }),<% } %><% if(theme === 'material') { %>
+  withStyles(styles),<% } %>
+)(<%= className %>Component);
+
+export { <%= className %> };

package/dist/templates/meteor/template/template.js.ts

@@ -0,0 +1 @@
+

package/dist/templates/meteor/template/template.js.tsx

@@ -0,0 +1,89 @@
+import { compose } from 'ramda'; // https://ramdajs.com/docs/#compose
+<% if (client === 'react') { %>import * as React from 'react';<% } else if (client === 'reflux') { %>
+import * as React from 'react';
+import PropTypes from 'prop-types';<% if ( isStore ) { %>
+import Store from 'reflux'; <% } else { %>
+import Component from 'reflux';<% } %><% } %>
+// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#withtrackerreactivefn-higher-order-component
+import { withTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+import { gql } from '@apollo/client';
+// https://www.apollographql.com/docs/react/api/react/hoc/#graphqlquery-configcomponent
+import { graphql } from '@apollo/client/react/hoc';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { withStyles } from '@mui/styles';
+
+const styles = (theme) => { };<% } %>
+<% if (!isStore && client === 'react') { %>
+interface <%= className %>Component {
+  props: object;
+  state: object;
+}
+class <%= className %>Component extends React.Component<<%= className %>Component> {<% } else if (!isStore && client === 'reflux') { %>
+interface <%= className %>Interface {
+  props: object;
+  state: object;
+}
+class <%= className %>Component extends Reflux.Component<<%= className %>Component> {<% } else { %>
+interface <%= className %>Component {
+  props: object;
+  state: object;
+}
+class <%= className %>Component extends Reflux.Store<<%= className %>Component> {<% } %><% if (client === 'reflux' && isStore) { %>
+  constructor() {
+    super();
+    this.state = {};
+  }<% } else { %>
+  /**
+   * Define types for your props for stability.
+   */
+  static propTypes = {};
+
+  /**
+   * If a prop is not required, it is a good idea to provide
+   * it a default value
+   */
+  static defaultProps = {};
+
+  /**
+   * Setup the component.  Best practices are to keep this light,
+   * and offload complex behavior to methods.
+   */
+  constructor(props:object) {
+    super(props);
+    this.state = {};<% if (client === 'reflux') { %>
+    this.stores = [];
+    this.storeKeys = [];<% } %>
+  }<% } %>
+
+  /**
+   * This method runs after the component output has been rendered to the DOM.
+   * This is where you can start to interact with HTML elements, such as <div>,
+   * or attach event listeners to DOM elements.
+   */
+  componentDidMount() { }
+
+  /**
+   * This is where the DOM will be torn down.  A good idea is to clean up any
+   * event listeners you've created in the componentDidMount() method.
+   */
+  componentWillUnmount() {<% if (client === 'reflux' && !isStore) { %> super.componentWillUnmount();<% }%> }
+
+  /**
+   * This is the main render method, and will rerun anytime either this.state or this.props is changed.
+   */
+  render() {
+    return (
+      <div id="<% if (isComponent) { %><%= cssCaseName %>-component<% } else { %><%= cssCaseName %><% } %>">
+        <h2>Find me in <%= myPath %></h2>
+      </div>
+    );
+  }
+}
+
+const <%= className %> = compose(
+  withTracker(() => {}),<% if(graphql === 'apollo') { %>
+  //graphql(gql`query Todos { todos }`, { variables: {/* input */} }),<% } %><% if(theme === 'material') { %>
+  withStyles(styles),<% } %>
+)(<%= className %>Component);
+
+export { <%= className %> };

package/dist/templates/react/component/component.css

@@ -0,0 +1,6 @@
+/*****************************************************************************/
+/* <%= className %>: Style */
+/*****************************************************************************/
+#<%= cssCaseName %>-component {
+
+}

package/dist/templates/react/component/component.css.less

@@ -0,0 +1,6 @@
+/*****************************************************************************/
+/* <%= cssCaseName %>: Style */
+/*****************************************************************************/
+#<%= cssCaseName %>-component {
+
+}

package/dist/templates/react/component/component.js.jsx

@@ -0,0 +1,64 @@
+import { compose } from 'ramda'; // https://ramdajs.com/docs/#compose
+import React, { Component } from 'react';
+// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#withtrackerreactivefn-higher-order-component
+import { withTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+import { gql } from '@apollo/client';
+// https://www.apollographql.com/docs/react/api/react/hoc/#graphqlquery-configcomponent
+import { graphql } from '@apollo/client/react/hoc';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { withStyles } from '@mui/styles';
+
+const styles = (theme) => { };<% } %>
+class <%= className %>Component extends Component {
+  /**
+   * Define types for your props for stability.
+   */
+  static propTypes = {};
+
+  /**
+   * If a prop is not required, it is a good idea to provide
+   * it a default value
+   */
+  static defaultProps = {};
+
+  /**
+   * Setup the component.  Best practices are to keep this light,
+   * and offload complex behavior to methods.
+   */
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  /**
+   * This method runs after the component output has been rendered to the DOM.
+   * This is where you can start to interact with HTML elements, such as <div>,
+   * or attach event listeners to DOM elements.
+   */
+  componentDidMount() { }
+
+  /**
+   * This is where the DOM will be torn down.  A good idea is to clean up any
+   * event listeners you've created in the componentDidMount() method.
+   */
+  componentWillUnmount() { }
+
+  /**
+   * This is the main render method, and will rerun anytime either this.state or this.props is changed.
+   */
+  render() {
+    return (
+      <div id="<%= cssCaseName %>-component">
+        <% if (isLayout) { %>{ this.props.children }<% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+      </div>
+    );
+  }
+}
+
+const <%= className %> = compose(
+  withTracker(() => {}),<% if(graphql === 'apollo') { %>
+  //graphql(gql`query Todos { todos }`, { variables: {/* input */} }),<% } %><% if(theme === 'material') { %>
+  withStyles(styles),<% } %>
+)(<%= className %>Component);
+
+export { <%= className %> };

package/dist/templates/react/component/component.js.tsx

@@ -0,0 +1,68 @@
+import { compose } from 'ramda'; // https://ramdajs.com/docs/#compose
+import * as React from 'react';
+import PropTypes from 'prop-types';// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#withtrackerreactivefn-higher-order-component
+import { withTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+import { gql } from '@apollo/client';
+// https://www.apollographql.com/docs/react/api/react/hoc/#graphqlquery-configcomponent
+import { graphql } from '@apollo/client/react/hoc';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { withStyles } from '@mui/styles';
+
+const styles = (theme) => { };<% } %>
+interface I<%= className %> {
+  props: object;
+  state: object;
+}
+class <%= className %>Component extends Component<I<%= className %>%> {
+  /**
+   * Define types for your props for stability.
+   */
+  static propTypes = {};
+
+  /**
+   * If a prop is not required, it is a good idea to provide
+   * it a default value
+   */
+  static defaultProps = {};
+
+  /**
+   * Setup the component.  Best practices are to keep this light,
+   * and offload complex behavior to methods.
+   */
+  constructor(props:object) {
+    super(props);
+    this.state = {};
+  }
+
+  /**
+   * This method runs after the component output has been rendered to the DOM.
+   * This is where you can start to interact with HTML elements, such as <div>,
+   * or attach event listeners to DOM elements.
+   */
+  componentDidMount() { }
+
+  /**
+   * This is where the DOM will be torn down.  A good idea is to clean up any
+   * event listeners you've created in the componentDidMount() method.
+   */
+  componentWillUnmount() { }
+
+  /**
+   * This is the main render method, and will rerun anytime either this.state or this.props is changed.
+   */
+  render() {
+    return (
+      <div id="<%= cssCaseName %>-component">
+        <% if (isLayout) { %>{ this.props.children }<% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+      </div>
+    );
+  }
+}
+
+const <%= className %> = compose(
+  withTracker(() => {}),<% if(graphql === 'apollo') { %>
+  //graphql(gql`query Todos { todos }`, { variables: {/* input */} }),<% } %><% if(theme === 'material') { %>
+  withStyles(styles),<% } %>
+)(<%= className %>Component);
+
+export { <%= className %> };

package/dist/templates/react/hook/hook.js

@@ -0,0 +1 @@
+

package/dist/templates/react/hook/hook.js.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#usetrackerreactivefn-deps-hook
+import { useTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+// https://www.apollographql.com/docs/react/api/react/hooks/#example-2
+import { useQuery, gql } from '@apollo/client';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { makeStyles } from '@mui/styles';
+const useStyles = makeStyles((theme) => ({}));<% } %>
+
+function <%= className %>(props) {
+  /*const { userId } = useTracker(() => {
+    const userId = Meteor.userId();
+    return { userId }
+  });*/<% if(graphql === 'apollo') { %>
+  //const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (theme === 'material') { %>
+  const classes = useStyles();<% } %>
+
+  return (
+    <div>
+      <% if (isLayout) { %>{ props.children }<% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+    </div>
+  );
+}
+
+export { <%= className %> };

package/dist/templates/react/hook/hook.js.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+// https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#usetrackerreactivefn-deps-hook
+import { useTracker } from 'meteor/react-meteor-data';<% if(graphql === 'apollo') { %>
+// https://www.apollographql.com/docs/react/api/react/hooks/#example-2
+import { useQuery, gql } from '@apollo/client';<% } %><% if (theme === 'material' ) { %>
+// https://material-ui.com/styles/basics/#higher-order-component-api
+import { makeStyles } from '@mui/styles';
+const useStyles = makeStyles((theme) => ({});<% } %>
+
+function <%= className %>(props) {
+  /*const { userId } = useTracker(() => {
+    const userId = Meteor.userId();
+    return { userId }
+  });*/<% if(graphql === 'apollo') { %>
+  // const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (theme === 'material') { %>
+  const classes = useStyles();<% } %>
+
+  return (
+    <div>
+      <% if (isLayout) { %>{ props.children }<% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+    </div>
+  );
+}
+
+export { <%= className %> };

package/dist/templates/react/route/route.js

@@ -0,0 +1,8 @@
+<% if (client === 'vanilla') { %>if (this.window.location.pathname === '<%= url %>') {
+  import <%= camelCaseName %>Page from '/imports/ui/pages/<%= fileCase %>/<%= fileCase %>';
+}<% } else { %>
+<% if (newForm) { %>const <%= templateName %> = (<% } %>
+  <Route path="<%= url %>" component={Component.<%= layout %>}>
+    <IndexRoute component={Component.<%= templateName %>}/>
+  </Route>
+<% if (newForm) { %>);<% } %><% } %>

package/dist/templates/react/route/route.js.jsx

@@ -0,0 +1,8 @@
+<% if (client === 'vanilla') { %>if (this.window.location.pathname === '<%= url %>') {
+  import <%= camelCaseName %>Page from '/imports/ui/pages/<%= fileCase %>/<%= fileCase %>';
+}<% } else { %>
+<% if (newForm) { %>const <%= templateName %> = (<% } %>
+  <Route path="<%= url %>" component={Component.<%= layout %>}>
+    <IndexRoute component={Component.<%= templateName %>}/>
+  </Route>
+<% if (newForm) { %>);<% } %><% } %>

package/dist/templates/react/route/route.js.ts

@@ -0,0 +1,8 @@
+<% if (client === 'vanilla') { %>if (this.window.location.pathname === '<%= url %>') {
+  import <%= camelCaseName %>Page from '/imports/ui/pages/<%= fileCase %>/<%= fileCase %>';
+}<% } else { %>
+<% if (newForm) { %>const <%= templateName %> = (<% } %>
+  <Route path="<%= url %>" component={Component.<%= layout %>}>
+    <IndexRoute component={Component.<%= templateName %>}/>
+  </Route>
+<% if (newForm) { %>);<% } %><% } %>

package/dist/templates/react/route/route.js.tsx

@@ -0,0 +1,8 @@
+<% if (client === 'vanilla') { %>if (this.window.location.pathname === '<%= url %>') {
+  import <%= camelCaseName %>Page from '/imports/ui/pages/<%= fileCase %>/<%= fileCase %>';
+}<% } else { %>
+<% if (newForm) { %>const <%= templateName %> = (<% } %>
+  <Route path="<%= url %>" component={Component.<%= layout %>}>
+    <IndexRoute component={Component.<%= templateName %>}/>
+  </Route>
+<% if (newForm) { %>);<% } %><% } %>

package/dist/templates/react/test/test.js

@@ -0,0 +1 @@
+

package/dist/templates/react/test/test.js.jsx

@@ -0,0 +1,56 @@
+import { Meteor } from 'meteor/meteor';
+
+import React from 'react';
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+if (Meteor.isClient) {<% if(graphql === 'apollo') { %>
+  import { MockedProvider } from '@apollo/react-testing';
+  import gql from 'graphql-tag';
+  const mocks = [
+    {
+      request: {
+        query: gql`query { trucks }`, // consider importing the query from the actual component
+        variables: {
+          sample: 'variable'
+        },
+      },
+      result: {
+        data: {
+          trucks: 'hello trucks'
+        }
+      }
+    }
+  ];
+  <% } %>
+  let container = null;
+  beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  const { <%=className%>%> } = require('./<%= fileName %>');
+  describe('<<%= className %>/>', function() {
+
+   it('did render', () => {
+     act(() => {<% if(graphql === 'apollo') { %>
+       render(
+          <MockedProvider mocks={mocks} addTypename={false}>
+           <<%= className %>/>
+         </MockedProvider>, container
+       );<% } else { %>
+       render(<<%= className %>/>, container);<% } %>
+     });
+
+     expect(container.textContent).toBe(<% if (isLayout) { %>""<% } else { %>"Find me in <%= myPath %>"<% } %>);
+    });
+  });
+}

package/dist/templates/react/test/test.js.ts

@@ -0,0 +1 @@
+