Enhancement/issue 25 remove lit dependency (#67)

* refactor components to native HTMLElement * remove lit dependency from the project * remove dependency on greenwood import-css plugin * clear up TODO * remove import-css plugin * refactor to use observedAttribute getter * fix linting
thescientist13 · Nov 10, 2023 · e60a046 · e60a046
1 parent a36b4f7
commit e60a046
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 224 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   parserOptions: {
-    ecmaVersion: 2021,
+    ecmaVersion: 2022,
     sourceType: 'module'
   },
   env: {

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # greenwood-starter-presentation
 
-Greenwood plugin and kickstarter repo for creating and authoring a slide deck from markdown, powered by [**GreenwoodJS**](https://www.greenwoodjs.io/)!  ♻️
+Greenwood plugin and kick-starter repo for creating and authoring a slide deck from markdown, powered by [**GreenwoodJS**](https://www.greenwoodjs.io/)!  ♻️
 
 ![greenwood-starter-presentation](./.github/images/greenwood-starter-presentation.png)
 
@@ -18,23 +18,19 @@ This project is principally intended to be consumed by a Greenwood project as a
 
 To add this plugin to an _existing_ Greenwood project (where `@greenwood/cli` has already been installed), please do the following:
 
-1. Install the plugin and its dependencies
+1. Install the plugin as a dev dependency
     ```sh
-    $ npm install @greenwood/plugin-import-css greenwood-starter-presentation --save-dev
-    $ npm install lit
+    $ npm install greenwood-starter-presentation --save-dev
     ```
 1. Add this plugin and all dependent plugins to your _greenwood.config.js_
     ```js
-    import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
     import { greenwoodThemeStarterPresentation } from 'greenwood-starter-presentation';
 
     export default {
-      .
-      .
+      // ...
       
       plugins: [
-        ...greenwoodPluginImportCss(),
-        ...greenwoodThemeStarterPresentation()
+        greenwoodThemeStarterPresentation()
       ]
 
     };
@@ -109,7 +105,7 @@ When you are running the app, the following controls and behaviors are available
 
 ### Slide Templates and Layouts
 
-To organize your slide content, this plugin provides the following template that can be specificed in markdown file's frontmatter.
+To organize your slide content, this plugin provides the following template that can be specified in markdown file's frontmatter.
 
 ex.
 ```md
@@ -216,7 +212,7 @@ Empty page body with an h1 at the top with `--color-secondary` color behind it a
 
 ----
 
-> _Remember, you can always add your own HTML and <style> tags right into markdown.  Additionaly, Greenwood also supports ad-hoc and one off imports of CSS and JS via [frontmatter imports]() for extra customization!_
+> _Remember, you can always add your own HTML and <style> tags right into markdown.  Additionally, Greenwood also supports ad-hoc and one off imports of CSS and JS via [frontmatter imports](https://www.greenwoodjs.io/docs/front-matter/#imports) for extra customization!_
 
 ### Theming and Design System
 The following global variables are provided to you to customize and override using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
@@ -257,7 +253,7 @@ To stay up to date with this repo depends on how you initialized your project or
 
 #### Plugin
 
-If you using the plugin, any upgrades should just be as simple as uprading the version of this plugin in your _package.json_ using your package manager of choice.
+If you using the plugin, any upgrades should just be as simple as upgrading the version of this plugin in your _package.json_ using your package manager of choice.
 
 ```sh
 # npm
@@ -277,7 +273,7 @@ $ git pull origin master
 If you forked, make sure to add this repo as an upstream and pull changes in as needed
 ```sh
 # use SSH (recommended) or HTTPS depending on your needs
-$ git remote add upsteam git@github.com:thescientist13/greenwood-starter-presentation.git
+$ git remote add upstream git@github.com:thescientist13/greenwood-starter-presentation.git
 $ git fetch upstream master
 $ git checkout master
 $ git merge upstream/master

diff --git a/greenwood.config.js b/greenwood.config.js
@@ -1,6 +1,5 @@
 import fs from 'fs';
 import { greenwoodThemeStarterPresentation } from './index.js';
-import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
 import path from 'path';
 import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js';
 
@@ -28,7 +27,6 @@ class MyThemePackDevelopmentResource extends ResourceInterface {
 
 export default {  
   plugins: [
-    greenwoodPluginImportCss(),
     greenwoodThemeStarterPresentation({
       __isDevelopment: true
     }),

diff --git a/package.json b/package.json
@@ -39,15 +39,10 @@
     "start": "npm run develop"
   },
   "peerDependencies": {
-    "@greenwood/cli": "~0.28.2",
-    "@greenwood/plugin-import-css": "~0.28.2"
-  },
-  "dependencies": {
-    "lit": "^2.2.3"
+    "@greenwood/cli": "~0.28.2"
   },
   "devDependencies": {
     "@greenwood/cli": "~0.29.0",
-    "@greenwood/plugin-import-css": "~0.29.0",
     "eslint": "^8.4.0",
     "rimraf": "^3.0.2",
     "stylelint": "^13.12.0",

diff --git a/src/components/presenter-mode.js b/src/components/presenter-mode.js
@@ -1,44 +1,41 @@
-import { css, html, LitElement, unsafeCSS } from 'lit';
-import themeCss from '../styles/theme.css?type=css';
+const template = document.createElement('template');
 
-class PresenterMode extends LitElement {
-
-  static get properties() {
-    return {
-      slides: {
-        type: Array
-      },
-      index: Number
-    };
-  }
+template.innerHTML = `
+  <style>
+    .fullscreen-container {
+      display: none;
+    }
 
-  static get styles() {
-    return css`
-      ${unsafeCSS(themeCss)}
+    .fullscreen-container-on {
+      background-color: var(--color-primary);
+      display: block;
+      z-index: 100;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
 
-      .fullscreen-container {
-        display: none;
-      }
+    iframe {
+      background-color: var(--color-primary);
+      min-width: 100%;
+      min-height: 100%;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 
-      .fullscreen-container-on {
-        background-color: var(--color-primary);
-        display: block;
-        z-index: 100;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
+  <button onclick="this.parentNode.host.enablePresenterMode()">Presenter Mode</button>
 
-      iframe {
-        background-color: var(--color-primary);
-        min-width: 100%;
-        min-height: 100%;
-        width: 100%;
-        height: 100%;
-      }
-    `;
+  <div class="fullscreen-container">
+    <iframe></iframe>
+  </div>
+`;
+
+class PresenterMode extends HTMLElement {
+  static get observedAttributes() {
+    return ['slides'];
   }
 
   constructor() {
@@ -48,18 +45,27 @@ class PresenterMode extends LitElement {
   }
 
   connectedCallback() {
-    super.connectedCallback();
-
     window.addEventListener('message', (postMessage) => {
-      this.slideNavigationKeyHander(postMessage.data);
+      this.slideNavigationKeyHandler(postMessage.data);
     });
 
     document.addEventListener('keydown', (event) => {
-      this.slideNavigationKeyHander(event.key);
+      this.slideNavigationKeyHandler(event.key);
     });
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
   }
 
-  enablePresenterMode() {    
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'slides' && newValue) {
+      this.slides = JSON.parse(newValue);
+    }
+  }
+
+  enablePresenterMode() {
     this.setCurrentSlide();
     this.shadowRoot.querySelector('div').classList.add('fullscreen-container-on');
   }
@@ -68,7 +74,7 @@ class PresenterMode extends LitElement {
     this.shadowRoot.querySelector('iframe').setAttribute('src', this.slides[index].route);
   }
 
-  slideNavigationKeyHander(keyName) {  
+  slideNavigationKeyHandler(keyName) {
     if (keyName === 'ArrowRight' || keyName === 'Spacebar' || keyName === 'Enter') {
       if ((this.index + 1) !== this.slides.length) {
         this.index = this.index += 1;
@@ -83,16 +89,6 @@ class PresenterMode extends LitElement {
       this.shadowRoot.querySelector('div').classList.remove('fullscreen-container-on');
     }
   }
-
-  render() {
-    return html`
-      <button @click=${this.enablePresenterMode}>Presenter Mode</button>
-      
-      <div class="fullscreen-container">
-        <iframe></iframe>
-      </div>
-    `;
-  }
 }
 
 customElements.define('presenter-mode', PresenterMode);