SAK-47228 Enable building webcomponents based on vue (sakaiproject#10484

)

library/pom.xml

@@ -316,6 +316,7 @@
 			<artifactId>dompurify</artifactId>
 			<version>2.3.6</version>
 		</dependency>
+
 	</dependencies>
 	<profiles>
 		<profile>

pack/pom.xml

@@ -40,6 +40,7 @@
             </activation>
             <properties>
                 <sakai.skip.tests>false</sakai.skip.tests>
+                <sakai.skip.phase>test</sakai.skip.phase>
             </properties>
         </profile>
         <profile>
@@ -51,6 +52,7 @@
             <id>skip-tests</id>
             <properties>
                 <sakai.skip.tests>true</sakai.skip.tests>
+                <sakai.skip.phase>none</sakai.skip.phase>
             </properties>
         </profile>
     </profiles>

pom.xml

@@ -115,6 +115,7 @@
                 <module>userauditservice</module>
                 <module>usermembership</module>
                 <module>velocity</module>
+                <module>vuecomponents</module>
                 <module>web</module>
                 <module>webapi</module>
                 <module>webcomponents</module>

portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/includeStandardHead.vm

@@ -76,6 +76,7 @@
         <script src="${pageSkinRepo}/${pageSkin}/js/lib/modernizr.js$!{portalCDNQuery}"></script>
         <script src="/library/js/sakai-message-broker.js$!{portalCDNQuery}"></script>
         <script src="/library/js/sakai-lti-advantage.js$!{portalCDNQuery}"></script>
+        <script type="module" src="/vuecomponents/js/sakai.min.js$!{portalCDNQuery}"></script>
         <script type="module" src="/webcomponents/sakai-profile.js$!{portalCDNQuery}"></script>
         <script type="module" src="/webcomponents/sakai-pronunciation-player.js$!{portalCDNQuery}"></script>
         <script src="${pageWebjarsPath}momentjs/2.29.1/min/moment-with-locales.min.js$!{portalCDNQuery}"></script>

vuecomponents/README.md

@@ -0,0 +1,17 @@
+# Sakai Vue Components Project
+
+## What is this project?
+
+This is a collection of vue components which are compiled to webcomponents, that are globally availabe in Sakai.
+
+## Vue Version
+
+Currently we are using using vue 2. As soon as vue-cli or vite is ready to compile vue 3 components to a webcomponent bundle, we can upgrade to vue 3. Our components won't need much of updating, since there is really good compatibility between vue 2 and 3. 
+
+## Tutorial
+
+If you want to lean about working with vue components in Sakai, please check out the [Tutorial](docs/tutorial.md)
+
+## Exisiting components
+
+If you want to take a look at the existing components you can take a look at them in the storybook (**comming soon**). Take a look at the [storybook tutorial](docs/storybook.md) for setup instructions.

vuecomponents/bundle/pom.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.sakaiproject</groupId>
+        <artifactId>vuecomponents-parent</artifactId>
+        <version>23-SNAPSHOT</version>
+    </parent>
+
+    <name>Sakai Vue Components Bundle</name>
+    <groupId>org.sakaiproject</groupId>
+    <artifactId>vuecomponents-bundle</artifactId>
+
+    <properties>
+        <deploy.target>shared</deploy.target>
+    </properties>
+
+    <build>
+        <resources>
+            <resource>
+                <directory>src/main/bundle</directory>
+            </resource>
+        </resources>
+    </build>
+
+</project>

vuecomponents/bundle/src/main/bundle/hello-world.properties

@@ -0,0 +1 @@
+helloworld=Hello Vue!

vuecomponents/docs/i18n.md

@@ -0,0 +1,39 @@
+# Internationalization (i18n)
+
+You can easyly internationalize your vue component with the i18n mixin.
+
+## Create properties file
+
+First, create a properties file with all the strings you need for your component. After building `vuecomponents/bundle` you should restart your tomcat if it was running, because the properties are loaded on tomcat startup.
+
+Ideally set the same name for the properties file, as you name your component (`avatar.vue` => `avatar.propeties`).
+
+## Use the i18n mixin
+
+Then import `i18n-mixin.js` and set the name option in your component.
+
+```js
+import i18nMixin from "../mixins/i18n-mixin.js";
+export default {
+  name: "hello-world",
+  mixins: [i18nMixin],
+};
+// references hello-world.properties
+```
+
+If name does not fit your usecase (if another properties file with your components name alreay exists for example),
+then set i18nProps in data, and this will be used to reference your properties file instead
+
+```js
+import i18nMixin from "../mixins/i18n-mixin.js";
+export default {
+  name: "hello-world",
+  mixins: [i18nMixin],
+  data() {
+    return {
+      i18nProps: "another",
+    };
+  },
+};
+// references another.properties
+```

vuecomponents/docs/storybook.md

@@ -0,0 +1,13 @@
+# Delevopment in Storybook
+
+Storybook is a tool to explore, develop and document reusable components.
+
+## Work in progress!
+
+Storybook is not setup for vuecomponents yet, but it will be soon, including a tutorial on how to develop using storybook and how to document your components!
+
+## Setup
+
+To make use of storybook, you will need to have node installed on your mashine, just download the latest LTS form the [node website](https://nodejs.dev/download) or use a package manager.
+
+Navigate to `vuecomponents/tool/src/main/frontend` and run `npm run storybook`. If you see an error message, try, if running `npm ci` fixes the problem

vuecomponents/docs/troubleshooting.md

@@ -0,0 +1,30 @@
+# Troubleshooting
+
+## UI does not react to changes on Arrays
+
+Due to JavaScript limitations some array Updates may not cause an Update in the components UI. This may happen if you update an item of an array directly, or alter the arrays length. Use the [vm.$set](https://v2.vuejs.org/v2/api/#vm-set) method to update the array in that case, and it will work fine.
+
+```js
+//Changing an Value
+myArray.$set(index, newValue);
+
+or
+
+//Adding a new Item
+this.myArray.push(newArrayItem);
+this.$set("myArray", alteredMyArray);
+```
+
+Due to dropping IE support with vue 3, this will be a thing of the past, when upgrading.
+
+## Messages of i18n bundle are missing
+
+1. Read [i18n doc](i18n.md)
+2. Restart your tomcat
+3. Make sure your bundles name is not conflicting with the bundle of another tool or a component's bundle in `webcomponents/bundle/src/main/bundle`
+4. Check if your bundle is in a look at the bundles in `tomcat/lib/vuecomponents-bundle-XX-SNAPSHOT.jar`
+5. Delete the jar containg the bundles `vuecomponents-bundle-23-SNAPSHOT.jar` and redeploy or deploy on a fresh tomcat
+
+## We want more!
+
+We don't want to run into more problems, but if you do, please add troubleshooting steps to this section or improve the tutorial.

vuecomponents/docs/tutorial.md

@@ -0,0 +1,32 @@
+# Tutorial - Vue webcomponents in Sakai
+
+This tutorial is made to help you with your first steps, working with vue components in Sakai. Improvements and feedback is very welcome.
+
+## Getting Started with vue
+
+If you dont have prior knowledge about vue, taking the [official vue tutorial](https://vuejs.org/tutorial/) is highly recommended. There you will learn the basics, in an interactive way. This is an vue 3 tutuorial, but the Options API (selected by default) works the same way as in vue 2 (what we are using currently).
+
+For further documentation and to learn more, check out the [official guide](https://v2.vuejs.org/v2/guide/) and the [API reference](https://v2.vuejs.org/v2/api/). Also, there are a lot of third party resources out there, to learn more about vue, so take a look around and pick, what fits your learning style.
+
+## Creating a new compomponent
+
+To author vue componets for Sakai we use the Single File Component format (SFC). That means, to get started you will need to create a new `.vue` file in `vuecomponents/tool/src/main/frontend/src/components`. The component defined there, will later be globally available in sakai, automatically adding the `sakai-`
+prefix: `avatar.vue` => `<sakai-avatar></sakai-avatar>` / `<sakai-avatar/>`
+
+### Delevopment in Storybook
+
+You might have a better development experience using storybook for developing your component and you can document it right away. Take a look at the [storybook tutorial](storybook.md)!
+
+### Imporve workfolw in Sakai
+
+It is possible to deploy your vue componentes directly to your tomcat on file save. To take advantage of this workflow, you will either need to set the TOMCAT_HOME enviornment variable or set the `tomcatPath`variable to point to your tomcat directory directly in the following script: `vuecomponents/tool/src/main/frontend/build-dev.mjs`.
+
+To start auto-deploying your component changes you will need to run `npm run build-dev` (from frontend directory).
+
+## Troubleshooting
+
+Having problems, working on a component? Take a look at [the troobleshooting document](troubleshooting.md), to find a solution or to get ahead of proplems that might come up in the future. Please consider adding to it, if you run into problems.
+
+## Options API vs Composition API
+
+As the Options API the only one available in vue 2, we should consider it as the default. Though there is an way to use the vue 3 composition API in vue 2 aswell, if that is desired before an vue 3 upgrade, we should add it to the tutorial.

vuecomponents/docs/unit-testing.md

@@ -0,0 +1,3 @@
+# Tutorial - Unit testing ue webcomponents in Sakai
+
+Work in progress... Take a look at the avatar test as an example

vuecomponents/pom.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.sakaiproject</groupId>
+        <artifactId>master</artifactId>
+        <version>23-SNAPSHOT</version>
+        <relativePath>../master/pom.xml</relativePath>
+    </parent>
+
+    <name>Sakai Vue Components</name>
+    <groupId>org.sakaiproject</groupId>
+    <artifactId>vuecomponents-parent</artifactId>
+    <packaging>pom</packaging>
+
+    <modules>
+        <module>bundle</module>
+        <module>tool</module>
+    </modules>
+
+</project>

vuecomponents/tool/pom.xml

@@ -0,0 +1,134 @@
+<?xml version="1.0"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.sakaiproject</groupId>
+        <artifactId>vuecomponents-parent</artifactId>
+        <version>23-SNAPSHOT</version>
+    </parent>
+
+    <name>Sakai Vue Components Tool</name>
+    <groupId>org.sakaiproject</groupId>
+    <artifactId>vuecomponents</artifactId>
+    <packaging>war</packaging>
+
+    <properties>
+        <frontend-maven-plugin.version>1.12.1</frontend-maven-plugin.version>
+        <frontend-maven-plugin.npmVersion>8.6.0</frontend-maven-plugin.npmVersion>
+        <frontend-maven-plugin.nodeVersion>v16.14.2</frontend-maven-plugin.nodeVersion>
+    </properties>
+
+    <profiles>
+        <profile>
+            <id>default</id>
+            <activation>
+                <activeByDefault>true</activeByDefault>
+            </activation>
+            <properties>
+                <sakai.skip.test.phase>test</sakai.skip.test.phase>
+            </properties>
+        </profile>
+        <profile>
+            <activation>
+                <property>
+                    <name>maven.test.skip</name>
+                </property>
+            </activation>
+            <id>skip-tests</id>
+            <properties>
+                <sakai.skip.test.phase>none</sakai.skip.test.phase>
+            </properties>
+        </profile>
+    </profiles>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-clean-plugin</artifactId>
+                <configuration>
+                    <filesets>
+                        <fileset>
+                            <directory>src/main/frontend/node_modules</directory>
+                        </fileset>
+                        <fileset>
+                            <directory>src/main/frontend/target</directory>
+                        </fileset>
+                    </filesets>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-war-plugin</artifactId>
+                <configuration>
+                    <warSourceDirectory>src/main/webapp</warSourceDirectory>
+                    <packagingExcludes>
+                        js/*.html
+                    </packagingExcludes>
+                    <webResources>
+                        <resource>
+                            <directory>src/main/frontend/target</directory>
+                        </resource>
+                    </webResources>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>${frontend-maven-plugin.version}</version>
+                <configuration>
+                    <installDirectory>target</installDirectory>
+                    <workingDirectory>src/main/frontend/</workingDirectory>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>${frontend-maven-plugin.nodeVersion}</nodeVersion>
+                            <npmVersion>${frontend-maven-plugin.npmVersion}</npmVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm install dependencies</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>
+                                install --unsafe-perm
+                            </arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>compile vue components to webcomponents bundl</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>
+				                run build
+                            </arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>Test vue components</id>
+                        <phase>${sakai.skip.test.phase}</phase>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>
+				                run test
+                            </arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>