clapton 0.0.18 → 0.0.20

data/lib/clapton/javascripts/dist/components-for-test.js

@@ -386,6 +386,27 @@ var Clapton = (function (exports) {
         }
     }
 
+    class Component {
+        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
+            this._state = state;
+            this.id = id;
+            this._errors = errors;
+        }
+        get render() {
+            return new Box({});
+        }
+        get renderWrapper() {
+            const root = this.render;
+            if (root.attributes) {
+                root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            else {
+                root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            return root.renderWrapper;
+        }
+    }
+
     class TextField {
         constructor(state, attribute, attributes = {}) {
             this.state = state;
@@ -427,105 +448,6 @@ var Clapton = (function (exports) {
         }
     }
 
-    const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };
-
-    class Presets {
-        bq(...props) {
-            return new Clapton.BlockQuote(...props);
-        }
-        box(...props) {
-            return new Clapton.Box(...props);
-        }
-        b(...props) {
-            return new Clapton.Bold(...props);
-        }
-        button(...props) {
-            return new Clapton.Button(...props);
-        }
-        check(...props) {
-            return new Clapton.Checkbox(props[0], props[1], props[2]);
-        }
-        code(...props) {
-            return new Clapton.Code(...props);
-        }
-        datetime(...props) {
-            return new Clapton.DateTimeField(props[0], props[1], props[2]);
-        }
-        el(...props) {
-            return new Clapton.Element(props[0], props[1]);
-        }
-        embed(...props) {
-            return new Clapton.Embed(props[0]);
-        }
-        em(...props) {
-            return new Clapton.Emphasis(...props);
-        }
-        form(...props) {
-            return new Clapton.Form(...props);
-        }
-        h(...props) {
-            return new Clapton.Heading(props[0], props[1]);
-        }
-        img(...props) {
-            return new Clapton.Image(props[0], props[1], props[2]);
-        }
-        a(...props) {
-            return new Clapton.Link(props[0], props[1]);
-        }
-        li(...props) {
-            return new Clapton.ListItem(...props);
-        }
-        ul(...props) {
-            return new Clapton.List(...props);
-        }
-        ol(...props) {
-            return new Clapton.OrderedList(...props);
-        }
-        p(...props) {
-            return new Clapton.Paragraph(...props);
-        }
-        q(...props) {
-            return new Clapton.Quote(...props);
-        }
-        radio(...props) {
-            return new Clapton.RadioButton(props[0], props[1], props[2]);
-        }
-        select(...props) {
-            return new Clapton.Select(props[0], props[1], props[2]);
-        }
-        span(...props) {
-            return new Clapton.Span(...props);
-        }
-        textarea(...props) {
-            return new Clapton.TextArea(props[0], props[1], props[2]);
-        }
-        input(...props) {
-            return new Clapton.TextField(props[0], props[1], props[2]);
-        }
-        text(...props) {
-            return new Clapton.Text(props[0]);
-        }
-    }
-
-    class Component {
-        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
-            this._state = state;
-            this.id = id;
-            this._errors = errors;
-            this._c = new Presets();
-        }
-        get render() {
-            return new Box({});
-        }
-        get renderWrapper() {
-            const root = this.render;
-            root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
-            return root.renderWrapper;
-        }
-    }
-
     exports.BlockQuote = BlockQuote;
     exports.Bold = Bold;
     exports.Box = Box;

data/lib/clapton/javascripts/dist/components.js

@@ -383,97 +383,23 @@ class Span {
     }
 }
 
-class Presets {
-    bq(...props) {
-        return new Clapton.BlockQuote(...props);
-    }
-    box(...props) {
-        return new Clapton.Box(...props);
-    }
-    b(...props) {
-        return new Clapton.Bold(...props);
-    }
-    button(...props) {
-        return new Clapton.Button(...props);
-    }
-    check(...props) {
-        return new Clapton.Checkbox(props[0], props[1], props[2]);
-    }
-    code(...props) {
-        return new Clapton.Code(...props);
-    }
-    datetime(...props) {
-        return new Clapton.DateTimeField(props[0], props[1], props[2]);
-    }
-    el(...props) {
-        return new Clapton.Element(props[0], props[1]);
-    }
-    embed(...props) {
-        return new Clapton.Embed(props[0]);
-    }
-    em(...props) {
-        return new Clapton.Emphasis(...props);
-    }
-    form(...props) {
-        return new Clapton.Form(...props);
-    }
-    h(...props) {
-        return new Clapton.Heading(props[0], props[1]);
-    }
-    img(...props) {
-        return new Clapton.Image(props[0], props[1], props[2]);
-    }
-    a(...props) {
-        return new Clapton.Link(props[0], props[1]);
-    }
-    li(...props) {
-        return new Clapton.ListItem(...props);
-    }
-    ul(...props) {
-        return new Clapton.List(...props);
-    }
-    ol(...props) {
-        return new Clapton.OrderedList(...props);
-    }
-    p(...props) {
-        return new Clapton.Paragraph(...props);
-    }
-    q(...props) {
-        return new Clapton.Quote(...props);
-    }
-    radio(...props) {
-        return new Clapton.RadioButton(props[0], props[1], props[2]);
-    }
-    select(...props) {
-        return new Clapton.Select(props[0], props[1], props[2]);
-    }
-    span(...props) {
-        return new Clapton.Span(...props);
-    }
-    textarea(...props) {
-        return new Clapton.TextArea(props[0], props[1], props[2]);
-    }
-    input(...props) {
-        return new Clapton.TextField(props[0], props[1], props[2]);
-    }
-    text(...props) {
-        return new Clapton.Text(props[0]);
-    }
-}
-
 class Component {
     constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
         this._state = state;
         this.id = id;
         this._errors = errors;
-        this._c = new Presets();
     }
     get render() {
         return new Box({});
     }
     get renderWrapper() {
         const root = this.render;
-        root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+        if (root.attributes) {
+            root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+        }
+        else {
+            root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+        }
         return root.renderWrapper;
     }
 }

data/lib/clapton/javascripts/rollup.config.mjs

@@ -34,6 +34,37 @@ export default [
       })
     ]
   },
+  {
+    input: 'src/c.ts',
+    output: {
+      file: 'dist/c.js',
+      format: 'esm'
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        sourceMap: false
+      })
+    ]
+  },
+  {
+    input: 'src/c-for-test.ts',
+    output: {
+      file: 'dist/c-for-test.js',
+      format: 'iife',
+      name: 'c'
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        sourceMap: false
+      })
+    ]
+  },
   {
     input: 'src/client.ts',
     output: {

data/lib/clapton/javascripts/src/c-for-test.ts

@@ -0,0 +1,160 @@
+import { Clapton } from "components"
+
+const bq = (...props: any[]) => {
+  return new Clapton.BlockQuote(...props)
+}
+
+const box = (...props: any[]) => {
+  return new Clapton.Box(...props)
+}
+
+const b = (...props: any[]) => {
+  return new Clapton.Bold(...props)
+}
+
+const button = (...props: any[]) => {
+  return new Clapton.Button(...props)
+}
+
+const check = (...props: any[]) => {
+  return new Clapton.Checkbox(props[0], props[1], props[2])
+}
+
+const code = (...props: any[]) => {
+  return new Clapton.Code(...props)
+}
+
+const datetime = (...props: any[]) => {
+  return new Clapton.DateTimeField(props[0], props[1], props[2])
+}
+
+const el = (...props: any[]) => {
+  return new Clapton.Element(props[0], props[1])
+}
+
+const embed = (...props: any[]) => {
+  return new Clapton.Embed(props[0])
+}
+
+const em = (...props: any[]) => {
+  return new Clapton.Emphasis(...props)
+}
+
+const form = (...props: any[]) => {
+  return new Clapton.Form(...props)
+}
+
+const h = (...props: any[]) => {
+  return new Clapton.Heading(props[0], props[1])
+}
+
+const img = (...props: any[]) => {
+  return new Clapton.Image(props[0], props[1], props[2])
+}
+
+const a = (...props: any[]) => {
+  return new Clapton.Link(props[0], props[1])
+}
+
+const li = (...props: any[]) => {
+  return new Clapton.ListItem(...props)
+}
+
+const ul = (...props: any[]) => {
+  return new Clapton.List(...props)
+}
+
+const ol = (...props: any[]) => {
+  return new Clapton.OrderedList(...props)
+}
+
+const p = (...props: any[]) => {
+  return new Clapton.Paragraph(...props)
+}
+
+const q = (...props: any[]) => {
+  return new Clapton.Quote(...props)
+}
+
+const radio = (...props: any[]) => {
+  return new Clapton.RadioButton(props[0], props[1], props[2])
+}
+
+const select = (...props: any[]) => {
+  return new Clapton.Select(props[0], props[1], props[2])
+}
+
+const span = (...props: any[]) => {
+  return new Clapton.Span(...props)
+}
+
+const textarea = (...props: any[]) => {
+  return new Clapton.TextArea(props[0], props[1], props[2])
+}
+
+const input = (...props: any[]) => {
+  return new Clapton.TextField(props[0], props[1], props[2])
+}
+
+const text = (...props: any[]) => {
+  return new Clapton.Text(props[0])
+}
+
+const c = (name: string, ...props: any[]) => {
+  switch (name) {
+    case "bq":
+      return bq(...props)
+    case "box":
+      return box(...props)
+    case "b":
+      return b(...props)
+    case "button":
+      return button(...props)
+    case "check":
+      return check(...props)
+    case "code":
+      return code(...props)
+    case "datetime":
+      return datetime(...props)
+    case "el":
+      return el(...props)
+    case "embed":
+      return embed(...props)
+    case "em":
+      return em(...props)
+    case "form":
+      return form(...props)
+    case "h":
+      return h(...props)
+    case "img":
+      return img(...props)
+    case "a":
+      return a(...props)
+    case "li":
+      return li(...props)
+    case "ul":
+      return ul(...props)
+    case "ol":
+      return ol(...props)
+    case "p":
+      return p(...props)
+    case "q":
+      return q(...props)
+    case "radio":
+      return radio(...props)
+    case "select":
+      return select(...props)
+    case "span":
+      return span(...props)
+    case "textarea":
+      return textarea(...props)
+    case "input":
+      return input(...props)
+    case "text":
+      return text(...props)
+    default:
+      return new Clapton.Component(...props)
+  }
+}
+
+export default c

data/lib/clapton/javascripts/src/c.ts

@@ -0,0 +1,160 @@
+import { Clapton } from "components"
+
+const bq = (...props: any[]) => {
+  return new Clapton.BlockQuote(...props)
+}
+
+const box = (...props: any[]) => {
+  return new Clapton.Box(...props)
+}
+
+const b = (...props: any[]) => {
+  return new Clapton.Bold(...props)
+}
+
+const button = (...props: any[]) => {
+  return new Clapton.Button(...props)
+}
+
+const check = (...props: any[]) => {
+  return new Clapton.Checkbox(props[0], props[1], props[2])
+}
+
+const code = (...props: any[]) => {
+  return new Clapton.Code(...props)
+}
+
+const datetime = (...props: any[]) => {
+  return new Clapton.DateTimeField(props[0], props[1], props[2])
+}
+
+const el = (...props: any[]) => {
+  return new Clapton.Element(props[0], props[1])
+}
+
+const embed = (...props: any[]) => {
+  return new Clapton.Embed(props[0])
+}
+
+const em = (...props: any[]) => {
+  return new Clapton.Emphasis(...props)
+}
+
+const form = (...props: any[]) => {
+  return new Clapton.Form(...props)
+}
+
+const h = (...props: any[]) => {
+  return new Clapton.Heading(props[0], props[1])
+}
+
+const img = (...props: any[]) => {
+  return new Clapton.Image(props[0], props[1], props[2])
+}
+
+const a = (...props: any[]) => {
+  return new Clapton.Link(props[0], props[1])
+}
+
+const li = (...props: any[]) => {
+  return new Clapton.ListItem(...props)
+}
+
+const ul = (...props: any[]) => {
+  return new Clapton.List(...props)
+}
+
+const ol = (...props: any[]) => {
+  return new Clapton.OrderedList(...props)
+}
+
+const p = (...props: any[]) => {
+  return new Clapton.Paragraph(...props)
+}
+
+const q = (...props: any[]) => {
+  return new Clapton.Quote(...props)
+}
+
+const radio = (...props: any[]) => {
+  return new Clapton.RadioButton(props[0], props[1], props[2])
+}
+
+const select = (...props: any[]) => {
+  return new Clapton.Select(props[0], props[1], props[2])
+}
+
+const span = (...props: any[]) => {
+  return new Clapton.Span(...props)
+}
+
+const textarea = (...props: any[]) => {
+  return new Clapton.TextArea(props[0], props[1], props[2])
+}
+
+const input = (...props: any[]) => {
+  return new Clapton.TextField(props[0], props[1], props[2])
+}
+
+const text = (...props: any[]) => {
+  return new Clapton.Text(props[0])
+}
+
+const c = (name: string, ...props: any[]) => {
+  switch (name) {
+    case "bq":
+      return bq(...props)
+    case "box":
+      return box(...props)
+    case "b":
+      return b(...props)
+    case "button":
+      return button(...props)
+    case "check":
+      return check(...props)
+    case "code":
+      return code(...props)
+    case "datetime":
+      return datetime(...props)
+    case "el":
+      return el(...props)
+    case "embed":
+      return embed(...props)
+    case "em":
+      return em(...props)
+    case "form":
+      return form(...props)
+    case "h":
+      return h(...props)
+    case "img":
+      return img(...props)
+    case "a":
+      return a(...props)
+    case "li":
+      return li(...props)
+    case "ul":
+      return ul(...props)
+    case "ol":
+      return ol(...props)
+    case "p":
+      return p(...props)
+    case "q":
+      return q(...props)
+    case "radio":
+      return radio(...props)
+    case "select":
+      return select(...props)
+    case "span":
+      return span(...props)
+    case "textarea":
+      return textarea(...props)
+    case "input":
+      return input(...props)
+    case "text":
+      return text(...props)
+    default:
+      return new Clapton.Component(...props)
+  }
+}
+
+export { c }

data/lib/clapton/javascripts/src/client.ts

@@ -42,4 +42,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   await initializeComponents();
   initializeActions();
   initializeInputs();
+  const event = new Event('clapton:render');
+  document.dispatchEvent(event);
 });

data/lib/clapton/javascripts/src/components/component.ts

@@ -1,17 +1,14 @@
 import { Box } from "./box";
-import { Presets } from "./presets";
 
 export class Component {
   id: string;
   _state: any;
   _errors: any[];
-  _c: Presets;
 
   constructor(state: any = {}, id: string = Math.random().toString(36).substring(2, 10), errors: any[] = []) {
     this._state = state;
     this.id = id;
     this._errors = errors;
-    this._c = new Presets()
   }
 
   get render(): any {
@@ -20,7 +17,11 @@ export class Component {
 
   get renderWrapper(): string {
     const root = this.render;
-    root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+    if (root.attributes) {
+      root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+    } else {
+      root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+    }
     return root.renderWrapper;
   }
 }

data/lib/clapton/test_helper/base.rb

@@ -5,10 +5,9 @@ module Clapton
 
       def render_component(component, params)
         js = File.read(File.join(__dir__, "..", "javascripts", "dist", "components-for-test.js"))
+        js += File.read(File.join(__dir__, "..", "javascripts", "dist", "c-for-test.js"))
         Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
           code = File.read(file)
-          code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\(/, '\1@c.\2(')
-          code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)(\.|$)/, '\1@c.\2()\3')
           js += Ruby2JS.convert(code, preset: true)
           js += "\n"
         end

data/lib/clapton/version.rb

@@ -1,4 +1,3 @@
 module Clapton
-  VERSION = '0.0.18'
+  VERSION = '0.0.20'
 end
-

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.18
+  version: 0.0.20
 platform: ruby
 authors:
 - Moeki Kawakami
@@ -130,6 +130,10 @@ files:
 - config/routes.rb
 - lib/clapton.rb
 - lib/clapton/engine.rb
+- lib/clapton/javascripts/dist/c
+- lib/clapton/javascripts/dist/c-base.js
+- lib/clapton/javascripts/dist/c-for-test.js
+- lib/clapton/javascripts/dist/c.js
 - lib/clapton/javascripts/dist/client.js
 - lib/clapton/javascripts/dist/components-for-test.js
 - lib/clapton/javascripts/dist/components.js
@@ -6702,6 +6706,8 @@ files:
 - lib/clapton/javascripts/src/actions/handle-action.spec.ts
 - lib/clapton/javascripts/src/actions/handle-action.ts
 - lib/clapton/javascripts/src/actions/initialize-actions.ts
+- lib/clapton/javascripts/src/c-for-test.ts
+- lib/clapton/javascripts/src/c.ts
 - lib/clapton/javascripts/src/channel/clapton-channel.js
 - lib/clapton/javascripts/src/client.ts
 - lib/clapton/javascripts/src/components-for-test.ts
@@ -6743,7 +6749,6 @@ files:
 - lib/clapton/javascripts/src/components/ordered-list.ts
 - lib/clapton/javascripts/src/components/paragraph.spec.ts
 - lib/clapton/javascripts/src/components/paragraph.ts
-- lib/clapton/javascripts/src/components/presets.ts
 - lib/clapton/javascripts/src/components/quote.spec.ts
 - lib/clapton/javascripts/src/components/quote.ts
 - lib/clapton/javascripts/src/components/radio-button.spec.ts