updated CHANGELOG

CHANGELOG.md

@@ -1,4 +1,12 @@
 # Changelog
+# [1.5.1] - 2023 - 07 - 19
+## Added
+- extension loader
+
+## Changed
+- refactored some event names
+- separated stores by functionality
+
 # [1.5.0] - 2023 - 07 - 14
 - switch to ES6 syntax
 - working with vite bundler. KNOWN BUG/CHANGE: editor now requires `const n = 4` instead of `n=4` this breaks some examples

src/stores/editor-store.js

@@ -1,3 +1,6 @@
+// to add:
+// flash block, flash line, format code
+
 export default function editorStore(state, emitter) {
     emitter.on('editor: randomize', function (evt) {
         const editor = state.editor.editor
@@ -14,6 +17,11 @@ export default function editorStore(state, emitter) {
         state.editor.editor.addCodeToTop(code)
     })
 
+    emitter.on('editor: load code', (code) => {
+        const editor = state.editor.editor
+        editor.setValue(code)
+    })
+
     emitter.on('editor: eval all', function () {
         const editor = state.editor.editor
         const code = editor.getValue()
@@ -28,11 +36,4 @@ export default function editorStore(state, emitter) {
         })
     })
 
-    emitter.on('editor: eval line', (line) => {
-        repl.eval(line)
-    })
-
-    emitter.on('editor:evalBlock', (block) => {
-        repl.eval(block)
-    })
 }

src/stores/gallery-store.js

@@ -7,9 +7,9 @@ export default function galleryStore(state, emitter) {
         sketches = new Gallery((code, sketchFromURL) => {
           emitter.emit('load and eval code', code)
           if(sketchFromURL) {
-            state.showInfo = false
+            emitter.emit('ui: hide info')
           } else {
-            state.showInfo = true
+            emitter.emit('ui: show info')
           }
           emitter.emit('render')
           // @todo create gallery store
@@ -19,12 +19,14 @@ export default function galleryStore(state, emitter) {
         state.gallery = sketches
       })
 
+      // redundant with below
       emitter.on('gallery:saveToURL', function () {
         let editor = state.editor.editor
         const editorText = editor.getValue()
         sketches.saveLocally(editorText)
       }) 
       
+      // save to url
       emitter.on('gallery: save locally', function (code) {
         // let editor = state.editor.editor
         // const editorText = editor.getValue()
@@ -55,7 +57,7 @@ export default function galleryStore(state, emitter) {
 
       emitter.on('gallery:showExample', () => {
         const editor = state.editor.editor
-        emitter.emit('ui: clear all')
+        emitter.emit('clear all')
         sketches.setRandomSketch()
         editor.setValue(sketches.code)
        // repl.eval(editor.getValue())

src/stores/gallery.js

@@ -95,7 +95,7 @@ export default class Gallery {
       this.setSketchFromCode(base64Code, callback)
     }
     if (showCode === 'false') {
-      this.emitter.emit('hideAll')
+      this.emitter.emit('ui: hide all')
       this.emitter.emit('hide info')
     }
     //

src/stores/store.js

@@ -12,8 +12,7 @@ export default function store(state, emitter) {
 
 
   emitter.on('load and eval code', (code) => {
-    const editor = state.editor.editor
+    emitter.emit('editor: load code', code)
-    editor.setValue(code)
     emitter.emit('repl: eval', code)
   })
 
@@ -46,17 +45,17 @@ export default function store(state, emitter) {
     editor.clear()
   }
 
-  emitter.on('ui: clear all', () => {
+  emitter.on('clear all', () => {
     clearAll()
   })
 
 
-  emitter.on('hideAll', function () {
+  emitter.on('ui: hide all', function () {
     state.showUI = !state.showUI
     emitter.emit('render')
   })
 
-  emitter.on('toggle info', function (count) {
+  emitter.on('ui: toggle info', function (count) {
     if (state.showInfo) {
       // state.showInfo = false
       // state.showExtensions = false
@@ -85,14 +84,14 @@ export default function store(state, emitter) {
   //   emitter.emit('render')
   // })
 
-  emitter.on('show extensions', () => {
+  emitter.on('ui: show extensions', () => {
     state.showExtensions = true
     state.showInfo = true
     emitter.emit('extensions: select category')
     emitter.emit('render')
   })
 
-  emitter.on('hide extensions', () => {
+  emitter.on('ui: hide extensions', () => {
     state.showExtensions = false
     emitter.emit('render')
   })

src/views/editor/editor.js

@@ -12,8 +12,6 @@ import keymaps from './keymaps.js'
 import Mutator from './randomizer/Mutator.js'
 import beautify from 'js-beautify'
 
-console.log('BEAUTIFY', beautify)
-
 var isShowing = true
 
 
@@ -34,9 +32,9 @@ export default class Editor extends EventEmitter {
     const extraKeys = {}
     Object.entries(keymaps).forEach(([key, e]) => extraKeys[key] = () => {
       if(e == 'editor:evalBlock') {
-        this.emit(e, this.getCurrentBlock().text)
+        this.emit('repl: eval', this.getCurrentBlock().text)
       } else if (e == 'editor: eval line') {
-        this.emit(e, this.getLine())
+        this.emit('repl: eval', this.getLine())
       } else if (e == 'editor:toggleComment') {
         this.cm.toggleComment()
       // } else if (e == 'gallery:saveToURL') {

src/views/editor/keymaps.js

@@ -6,6 +6,6 @@ export default {
     'Shift-Ctrl-G': 'gallery:shareSketch',
     'Shift-Ctrl-F': 'editor:formatCode',
     'Shift-Ctrl-L': 'gallery:saveToURL',
-    'Shift-Ctrl-H': 'hideAll',
+    'Shift-Ctrl-H': 'ui: hide all',
     'Shift-Ctrl-S': 'screencap'
 }

src/views/toolbar.js

@@ -12,13 +12,13 @@ export default function toolbar(state, emit) {
 
     
 
-    const toggleInfo = state.showInfo ? icon("close", "fa-times", t('toolbar.hide-info'), 'toggle info') : icon("close", "fa-question-circle", t('toolbar.show-info'), 'toggle info') 
+    const toggleInfo = state.showInfo ? icon("close", "fa-times", t('toolbar.hide-info'), 'ui: toggle info') : icon("close", "fa-question-circle", t('toolbar.show-info'), 'ui: toggle info') 
     
-    const toggleExtensions = !state.showExtensions ? icon("add", "fa-solid fa-puzzle-piece", t('toolbar.load-extension'), 'show extensions') : icon("close", "fa-question-circle", t('toolbar.show-info'), 'hide extensions')  
+    const toggleExtensions = !state.showExtensions ? icon("add", "fa-solid fa-puzzle-piece", t('toolbar.load-extension'), 'ui: show extensions') : icon("close", "fa-question-circle", t('toolbar.show-info'), 'ui: hide extensions')  
 
     return html`<div id="toolbar-container">
         ${icon("run", `fa-play-circle ${hidden}`, t('toolbar.run'), 'editor: eval all')}
-        ${icon("clear", `fa fa-trash ${hidden}`, t('toolbar.clear'), 'ui: clear all')}
+        ${icon("clear", `fa fa-trash ${hidden}`, t('toolbar.clear'), 'clear all')}
         ${toggleExtensions}
         ${icon("shuffle", `fa-random`, t('toolbar.shuffle'), 'gallery:showExample')}
         ${icon("mutator", `fa-dice ${hidden}`, t('toolbar.random'), 'editor: randomize')}