Merge 9f4faf9 into 1a4927b

.travis.yml

@@ -77,6 +77,9 @@ matrix:
         - env: TOXENV=py27-skeletontests-Plone52-template-addon_restapi_service
         - env: TOXENV=py37-skeletontests-Plone52-template-addon_restapi_service
           python: "3.7"
+        - env: TOXENV=py27-skeletontests-Plone52-template-addon_svelte_app
+        - env: TOXENV=py37-skeletontests-Plone52-template-addon_svelte_app
+          python: "3.7"
 
 
 install:

CHANGES.rst

@@ -1,10 +1,11 @@
 Changelog
 =========
 
-5.1.3 (unreleased)
+5.2 (unreleased)
 ------------------
 
-- Nothing changed yet.
+- Add svelte_app template including with custom-element (web-component) support
+  [MrTango]
 
 
 5.1.2 (2020-10-14)

bobtemplates/plone/svelte_app.py

@@ -0,0 +1,68 @@
+# -*- coding: utf-8 -*-
+
+from bobtemplates.plone.base import base_prepare_renderer
+from bobtemplates.plone.base import git_commit
+from bobtemplates.plone.base import update_file
+from lxml import etree
+from mrbob.bobexceptions import ValidationError
+
+import case_conversion as cc
+import re
+
+
+def check_name(configurator, question, answer):
+    if not re.match("[a-z]+-+[a-z0-9]+$", answer):
+        raise ValidationError(
+            u"{key} is not a valid custom-element identifier. Please try something like this 'my-element'".format(key=answer)
+        )  # NOQA: E501
+    return answer
+
+
+def _update_configure_zcml(configurator):
+    file_name = u"configure.zcml"
+    file_path = configurator.variables["package_folder"] + "/" + file_name
+    namespaces = {"plone": "http://namespaces.plone.org/plone"}
+
+    with open(file_path, "r") as xml_file:
+        parser = etree.XMLParser(remove_blank_text=True)
+        tree = etree.parse(xml_file, parser)
+        tree_root = tree.getroot()
+        xpath = "./plone:static[@name='{}.svelte']".format(configurator.variables["package.dottedname"])
+        if len(tree_root.xpath(xpath, namespaces=namespaces)):
+            print(
+                "{name}.svelte already in configure.zcml, skip adding!".format(name=configurator.variables["package.dottedname"])
+            )
+            return
+
+    match_str = "-*- extra stuff goes here -*-"
+    insert_str = """
+  <plone:static
+      directory="svelte_apps"
+      type="plone"
+      name="{0}.svelte"
+      />
+
+""".format(
+        configurator.variables["package.dottedname"]
+    )
+    update_file(configurator, file_path, match_str, insert_str)
+
+
+def pre_renderer(configurator):
+    """Pre rendering."""
+    configurator = base_prepare_renderer(configurator)
+    configurator.variables['template_id'] = 'svelte_app'
+    name = configurator.variables['svelte_app_name'].strip('_')
+    configurator.variables['svelte_app_file_name'] = cc.snakecase(name)
+    configurator.variables['svelte_app_name_dashed'] = cc.dashcase(name)
+
+
+def post_renderer(configurator):
+    """Post rendering."""
+    _update_configure_zcml(configurator)
+    git_commit(
+        configurator,
+        'Add Svelte app: in svelte_apps/{0}'.format(
+            configurator.variables['svelte_app_name'],
+        ),
+    )

bobtemplates/plone/svelte_app/.mrbob.ini

@@ -0,0 +1,28 @@
+[questions]
+subtemplate_warning.question = Please commit your changes, before using a sub-template! Continue anyway? [n/y]
+subtemplate_warning.required = True
+subtemplate_warning.default = n
+subtemplate_warning.pre_ask_question = bobtemplates.plone.base:git_clean_state_check
+subtemplate_warning.post_ask_question = mrbob.hooks:validate_choices bobtemplates.plone.base:subtemplate_warning_post_question
+subtemplate_warning.choices = y|n
+subtemplate_warning.choices_delimiter = |
+
+svelte_app_name.question = Name of your Svelte app
+svelte_app_name.help = The name of the Svelte app.
+svelte_app_name.default = my-svelte-app
+svelte_app_name.required = True
+svelte_app_name.pre_ask_question = bobtemplates.plone.base:check_root_folder
+svelte_app_name.post_ask_question = bobtemplates.plone.svelte_app:check_name
+
+svelte_app_custom_element.question = Should Svelte compile to a custom-element ak web-component?
+svelte_app_custom_element.help = Svelte can be used to create custom-elements, be aware that this does not support all Svelte features!
+svelte_app_custom_element.required = True
+svelte_app_custom_element.default = n
+svelte_app_custom_element.post_ask_question = mrbob.hooks:validate_choices mrbob.hooks:to_boolean
+svelte_app_custom_element.choices = y|n
+svelte_app_custom_element.choices_delimiter = |
+
+[template]
+post_ask = bobtemplates.plone.base:set_global_vars
+pre_render = bobtemplates.plone.svelte_app:pre_renderer
+post_render = bobtemplates.plone.svelte_app:post_renderer

bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/profiles/default/registry/rreg-+svelte_app_file_name+.xml.bob

@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<registry
+    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
+    i18n:domain="{{{ package.dottedname }}}">
+  <records prefix="plone.bundles/{{{ svelte_app_file_name }}}"
+          interface='Products.CMFPlone.interfaces.IBundleRegistry'>
+    <value key="depends">plone</value>
+    <value key="enabled">True</value>
+    <value key="load_defer">True</value>
+    <value key="compile">False</value>
+    <value key="jscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_file_name }}}/bundle.js</value>
+    <value key="csscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_file_name }}}/bundle.css</value>
+    <value key="last_compilation">2020-10-29 22:00:00</value>
+  </records>
+
+</registry>

bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_file_name+/README.md.bob

@@ -0,0 +1,6 @@
+# Svelte app output directory
+
+This is the directory where your Svelte app will deployed into the Plone package.
+From here all resources will be loaded.
+
+To activate the app inside a Plone page, read the integration chapter of the README file next the app source files in /svelte_apps/{{{ svelte_app_file_name }}}.

bobtemplates/plone/svelte_app/svelte_src/+svelte_app_file_name+/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

bobtemplates/plone/svelte_app/svelte_src/+svelte_app_file_name+/README.md.bob

@@ -0,0 +1,64 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# Your svelte app "{{{ svelte_app_name }}}", integrated in Plone CMS
+
+This is a project template for [Svelte](https://svelte.dev) apps. It is based on https://github.com/sveltejs/template.
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte_apps/{{{ svelte_app_file_name }}}
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+If you are testing the app inside Plone, you probably have to relead manually for now.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+This will build the bundles and copy all needed files into the Plone package apps directory.
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+## Integrating the app into Plone
+
+To use the app in Plone, you can add an HTML element with the id "{{{ svelte_app_name }}}", for example with the TinyMCE editor in SourceCode mode:
+
+    <div id="{{{ svelte_app_name }}}"></div>
+

bobtemplates/plone/svelte_app/svelte_src/+svelte_app_file_name+/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0"
+  }
+}

bobtemplates/plone/svelte_app/svelte_src/+svelte_app_file_name+/public/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

bobtemplates/plone/svelte_app/svelte_src/+svelte_app_file_name+/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+
+  <div id=""></div>
+
+</body>
+</html>