@maka/maka-cli 5.123.1 → 5.124.0

package/bundle/typescript/src/templates/react/component/component.css.less

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

package/bundle/typescript/src/templates/react/component/component.css.scss

@@ -1,3 +1,3 @@
-#<%= cssCaseName %> {
-
-}
+#<%= cssCaseName %> {
+
+}

package/bundle/typescript/src/templates/react/component/component.js.jsx

@@ -1,59 +1,59 @@
-import React, { Component } from 'react';<% if (withTranslations) { %>
-import { withTranslation } from 'react-i18next';<% } %>
-<% if (isLayout) { %>
-import { Outlet } from 'react-router-dom';
-<% }%>
-
-class <%= className %> 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() {<% if(clientGraphql === 'apollo') { %>
-    // Consider using the Query component or graphql() HOC from @apollo/client for class components<% } %><% if (withTranslations && !isLayout) { %>
-    const { t } = this.props;<% } %>
-    return (
-      <div id="<%= cssCaseName %>">
-        <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
-      </div>
-    );
-  }
-}
-<% if (withTranslations) { %>
-const <%= className %>WithTranslation = withTranslation()(<%= className %>);
-export { <%= className %>WithTranslation as <%= className %> };
-<% } else { %>
-export { <%= className %> };
-<% } %>
+import React, { Component } from 'react';<% if (withTranslations) { %>
+import { withTranslation } from 'react-i18next';<% } %>
+<% if (isLayout) { %>
+import { Outlet } from 'react-router-dom';
+<% }%>
+
+class <%= className %> 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() {<% if(clientGraphql === 'apollo') { %>
+    // Consider using the Query component or graphql() HOC from @apollo/client for class components<% } %><% if (withTranslations && !isLayout) { %>
+    const { t } = this.props;<% } %>
+    return (
+      <div id="<%= cssCaseName %>">
+        <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+      </div>
+    );
+  }
+}
+<% if (withTranslations) { %>
+const <%= className %>WithTranslation = withTranslation()(<%= className %>);
+export { <%= className %>WithTranslation as <%= className %> };
+<% } else { %>
+export { <%= className %> };
+<% } %>

package/bundle/typescript/src/templates/react/component/component.js.tsx

@@ -1,65 +1,65 @@
-import * as React from 'react';<% if (withTranslations) { %>
-import { withTranslation, WithTranslation } from 'react-i18next';<% } %>
-<% if (isLayout) { %>
-import { Outlet } from 'react-router-dom';
-<% }%>
-
-interface I<%= className %><% if (withTranslations) { %> extends WithTranslation<% } %> {
-  props: object;
-  state: object;
-}
-class <%= className %> extends React.Component<I<%= className %>> {
-  public state: object;
-
-  /**
-   * 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: I<%= className %>) {
-    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() {<% if(clientGraphql === 'apollo') { %>
-    // Consider using the Query component or graphql() HOC from @apollo/client for class components<% } %><% if (withTranslations && !isLayout) { %>
-    const { t } = this.props;<% } %>
-    return (
-      <div id="<%= cssCaseName %>">
-        <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
-      </div>
-    );
-  }
-}
-<% if (withTranslations) { %>
-const <%= className %>WithTranslation = withTranslation()(<%= className %>);
-export { <%= className %>WithTranslation as <%= className %> };
-<% } else { %>
-export { <%= className %> };
-<% } %>
+import * as React from 'react';<% if (withTranslations) { %>
+import { withTranslation, WithTranslation } from 'react-i18next';<% } %>
+<% if (isLayout) { %>
+import { Outlet } from 'react-router-dom';
+<% }%>
+
+interface I<%= className %><% if (withTranslations) { %> extends WithTranslation<% } %> {
+  props: object;
+  state: object;
+}
+class <%= className %> extends React.Component<I<%= className %>> {
+  public state: object;
+
+  /**
+   * 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: I<%= className %>) {
+    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() {<% if(clientGraphql === 'apollo') { %>
+    // Consider using the Query component or graphql() HOC from @apollo/client for class components<% } %><% if (withTranslations && !isLayout) { %>
+    const { t } = this.props;<% } %>
+    return (
+      <div id="<%= cssCaseName %>">
+        <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+      </div>
+    );
+  }
+}
+<% if (withTranslations) { %>
+const <%= className %>WithTranslation = withTranslation()(<%= className %>);
+export { <%= className %>WithTranslation as <%= className %> };
+<% } else { %>
+export { <%= className %> };
+<% } %>

package/bundle/typescript/src/templates/react/hook/hook.css

@@ -1,3 +1,3 @@
-#<%= cssCaseName %> {
-
-}
+#<%= cssCaseName %> {
+
+}

package/bundle/typescript/src/templates/react/hook/hook.css.scss

@@ -1,3 +1,3 @@
-#<%= cssCaseName %> {
-
-}
+#<%= cssCaseName %> {
+
+}

package/bundle/typescript/src/templates/react/hook/hook.js.jsx

@@ -1,19 +1,19 @@
-import React from 'react'<%if (withTranslations && !isLayout) { %>
-import { useTranslation } from 'react-i18next';<% } %>
-<% if (isLayout) { %>
-import { Outlet } from 'react-router-dom';
-<% }%>
-
-function <%= className %>() {
-  <% if(clientGraphql === 'apollo') { %>
-  //const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (withTranslations && !isLayout) { %>
-  const { t } = useTranslation();<% } %>
-
-  return (
-    <div id="<%= cssCaseName %>">
-      <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
-    </div>
-  );
-}
-
-export { <%= className %> };
+import React from 'react'<%if (withTranslations && !isLayout) { %>
+import { useTranslation } from 'react-i18next';<% } %>
+<% if (isLayout) { %>
+import { Outlet } from 'react-router-dom';
+<% }%>
+
+function <%= className %>() {
+  <% if(clientGraphql === 'apollo') { %>
+  //const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (withTranslations && !isLayout) { %>
+  const { t } = useTranslation();<% } %>
+
+  return (
+    <div id="<%= cssCaseName %>">
+      <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+    </div>
+  );
+}
+
+export { <%= className %> };

package/bundle/typescript/src/templates/react/hook/hook.js.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';<%if (withTranslations && !isLayout) { %>
-import { useTranslation } from 'react-i18next';<% } %>
-<% if (isLayout) { %>
-import { Outlet } from 'react-router-dom';
-<% }%>
-
-function <%= className %>() {
-  <% if(clientGraphql === 'apollo') { %>
-  //const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (withTranslations && !isLayout) { %>
-  const { t } = useTranslation();<% } %>
-
-  return (
-    <div id="<%= cssCaseName %>">
-      <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
-    </div>
-  );
-}
-
-export { <%= className %> };
+import * as React from 'react';<%if (withTranslations && !isLayout) { %>
+import { useTranslation } from 'react-i18next';<% } %>
+<% if (isLayout) { %>
+import { Outlet } from 'react-router-dom';
+<% }%>
+
+function <%= className %>() {
+  <% if(clientGraphql === 'apollo') { %>
+  //const { loading, error, data } = useQuery(gql`query Todos { todos }`, { variables: {/* input */} }); <% } %><% if (withTranslations && !isLayout) { %>
+  const { t } = useTranslation();<% } %>
+
+  return (
+    <div id="<%= cssCaseName %>">
+      <% if (isLayout) { %><Outlet /><% } else if (withTranslations) { %><h2>{t('example', { page: '<%= myPath %>' } )}</h2><% } else { %><h2>Find me in <%= myPath %></h2><% } %>
+    </div>
+  );
+}
+
+export { <%= className %> };