@silexlabs/silex 3.0.1-alpha.0 → 3.0.1

package/src/ts/client/grapesjs/template.ts

@@ -1,166 +0,0 @@
-import {html, render} from 'lit-html'
-import {styleMap} from 'lit-html/directives/style-map.js'
-import grapesjs from 'grapesjs/dist/grapes.min.js'
-import { onAll } from '../utils'
-
-const pluginName = 'template'
-const templateType = 'templateType'
-const templateKey = 'template'
-
-export const templatePlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
-  // Add the new trait to all component types
-  editor.DomComponents.getTypes().map(type => {
-    editor.DomComponents.addType(type.id, {
-      model: {
-        defaults: {
-          traits: [
-            // Keep the type original traits
-            ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits,
-            // Add the new trait
-            {
-              label: false,
-              type: templateType,
-              name: pluginName,
-            },
-          ]
-        }
-      }
-    })
-  })
-
-  function doRender(el) {
-    const template = editor.getSelected()?.get(templateKey) || {}
-    const taStyle = opts.styles?.textarea ?? styleMap({
-      backgroundColor: 'var(--darkerPrimaryColor)',
-    })
-    const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
-    const labels = {
-      before: html`<strong>Before</strong> the element`,
-      replace: html`<strong>Replace</strong> the element's children`,
-      after: html`<strong>After</strong> the element`,
-      attributes: html`HTML attributes`,
-      classname: html`CSS classes`,
-      style: html`CSS styles`,
-    }
-    render(html`
-      <div>
-        <h3>Template</h3>
-        <p>This will be inserted in the published version</p>
-      </div>
-      ${['classname', 'attributes', 'style'].map(id => html`
-      <label>
-        ${labels[id]}
-        <input
-          id="template-${id}"
-          .value=${template[id] || ''}
-          style=${taStyle}
-          />
-      </label>
-      `)}
-      ${['before', 'replace', 'after'].map(id => html`
-        <label
-          for="template-${id}"
-          >${labels[id]}</label>
-        <textarea
-          id="template-${id}"
-          style=${taStyle}
-          .value=${template[id] || ''}
-          ></textarea>
-      `)}
-    `, el)
-  }
-
-  editor.TraitManager.addType(templateType, {
-    createInput({ trait }) {
-      // Create a new element container and add some content
-      const el = document.createElement('div')
-      el.classList.add('gjs-one-bg')
-      // update the UI when a page is added/renamed/removed
-      editor.on('page', () => doRender(el))
-      doRender(el)
-      // this will be the element passed to onEvent and onUpdate
-      return el
-    },
-    // Update the component based on UI changes
-    // `elInput` is the result HTMLElement you get from `createInput`
-    onEvent({ elInput, component, event }) {
-      const template = {
-        before: elInput.querySelector('#template-before').value,
-        replace: elInput.querySelector('#template-replace').value,
-        after: elInput.querySelector('#template-after').value,
-        attributes: elInput.querySelector('#template-attributes').value,
-        classname: elInput.querySelector('#template-classname').value,
-        style: elInput.querySelector('#template-style').value,
-      }
-
-      // Store the new template
-      if(Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
-        component.set(templateKey, template)
-      } else {
-        component.set(templateKey)
-      }
-    },
-    // Update UI on the component change
-    onUpdate({ elInput, component }) {
-      doRender(elInput)
-    },
-  })
-
-  // Make html attribute
-  // Quote strings, no values for boolean
-  function makeAttribute(key, value) {
-    switch(typeof value) {
-    case 'boolean': return value ? key : ''
-    default: return `${key}="${value}"`
-    }
-  }
-  // Remove empty lines in templates
-  function cleanup(template) {
-    return template
-      // split in lines
-      .split('\n')
-      // remove lines with only spaces
-      .map(line => line.trim())
-      .filter(line => !!line)
-      // put back together
-      .join('\n')
-  }
-  editor.on(opts.eventStart || 'publish:before', () => {
-    // Insert templates
-    onAll(editor, c => {
-      const template = c.get(templateKey)
-      const toHTML = c.toHTML
-      const classes = c.getClasses()
-      const before = cleanup(template?.before || '')
-      const replace = cleanup(template?.replace || '')
-      const after = cleanup(template?.after || '')
-      const classname = cleanup(template?.classname || '')
-      const style = cleanup(template?.style || '')
-      const attributes = cleanup(template?.attributes || '')
-      // Store the initial method
-      if(!c.has('tmpHtml')) c.set('tmpHtml', toHTML)
-      // Override the method
-      c.toHTML = () => {
-        return `${
-          before
-        }${ c.get('tagName') ? `<${c.get('tagName')}
-            ${Object.entries(c.get('attributes')).map(([key, value]) => makeAttribute(key, value)).join(' ')}
-            ${classes.length || classname ? `class="${classes.join(' ')} ${classname}"` : ''}
-            ${attributes}
-            ${style ? `style="${style}"` : ''}
-            >` : '' }${
-          replace || c.getInnerHTML()
-        }${ c.get('tagName') ? `</${c.get('tagName')}>` : '' }${
-          after
-        }`
-      }
-    })
-  })
-  editor.on(opts.eventStop || 'publish:stop', () => {
-    onAll(editor, c => {
-      // Restore the original method
-      c.toHTML = c.get('tmpHtml')
-    })
-  })
-})
-

package/src/ts/events.ts

@@ -1,2 +0,0 @@
-export const EVENT_STARTUP_START = 'silex:startup:start'
-export const EVENT_STARTUP_END = 'silex:startup:end'

package/tsconfig-server-debug.json

@@ -1,19 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "outDir": "dist/",
-    "target": "esnext",
-    "inlineSourceMap": true,
-    "module": "CommonJS",
-    "removeComments": false,
-    "esModuleInterop": true, /* for import 'Events' in silex-plugins */
-    "typeRoots": [
-      "src/ts/types",
-      "node_modules/@types"
-    ]
-  },
-  "include": [
-    "src/ts/server/index.ts",
-    "src/ts/server/cli.ts"
-  ]
-}

package/tsconfig-server-release.json

@@ -1,19 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "dist/",
-    "target": "esnext",
-    "sourceMap": false,
-    "module": "CommonJS",
-    "removeComments": true,
-    "esModuleInterop": true, /* for import 'Events' in silex-plugins */
-    "typeRoots": [
-      "src/ts/types",
-      "node_modules/@types"
-    ]
-  },
-  "include": [
-    "src/ts/server/index.ts",
-    "src/ts/server/cli.ts"
-  ]
-}

package/tsconfig.jest.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist/client/",
-    "target": "ES2019",
-    "sourceMap": true,
-    "module": "esnext",
-    "esModuleInterop": true,
-  }
-}

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "outDir": "dist/client/",
-    "target": "ESNext",
-    "sourceMap": true,
-    "module": "ESNext",
-    "removeComments": false,
-    "allowJs": true,
-    "typeRoots": [
-      "src/ts/types",
-      "node_modules/@types"
-    ],
-    "moduleResolution": "node",
-    "esModuleInterop": true
-  },
-  "include": [
-    "src/ts/client/index.ts"
-  ],
-  "plugins": [
-    {
-      "name": "ts-lit-plugin",
-      "strict": true
-    }
-  ]
-}

package/webpack.config.js

@@ -1,28 +0,0 @@
-const path = require('path');
-const webpack = require("webpack")
-
-module.exports = {
-  entry: './src/ts/client/expose.ts',
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-      },
-    ]
-  },
-  resolve: {
-    extensions: [ '.tsx', '.ts', '.js' ],
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'dist/client/js'),
-    library: 'silex',
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      VERSION: JSON.stringify(require("./package.json").version),
-    }),
-  ]
-};

package/webpack.debug.config.js

@@ -1,8 +0,0 @@
-const prodConfig = require('./webpack.config')
-
-module.exports = {
-  ...prodConfig,
-  //devtool: 'inline-source-map',
-  devtool: 'source-map',
-  mode: 'development',
-};