fixes #2

add log feature to log out values within the executed code

.gitignore

@@ -1,3 +1,5 @@
 .idea/
 node_modules/
-dist/
+dist/
+dw.json
+cartridge/static/default/index.html

README.md

@@ -8,10 +8,14 @@ Dev Console
 ## Features
 
 - [X] Execute Server Side JavaScript on your Sandbox in your favorite browser
+- [X] Adds a global `log` method to allow logging without your code
 - [X] No Site Preferences or Misc Imports Required, just drop in and go
 - [X] Safety Measures to prevent running in Production Environments
 - [X] Menu in the Business Manager (with role management)
 
+Example use of the `log` feature build into the dev console
+![log-example.png](documentation/log-example.png)
+
 Installation
 ---
 
@@ -53,6 +57,7 @@ Use cases
 
 * Execute code using your storefront session
 * View objects from the current customer session
+* Iterate through objects and use the global `log` method to print those logs to the console
 
 ### Business Manager
 

cartridge/controllers/Console.js

@@ -83,10 +83,11 @@ function Run() {
 
     var result;
     var startTime = new Date();
+    var logs = new dw.util.ArrayList();
 
     try {
-        var myFunc = new Function('code', code);
-        result = myFunc();
+        var myFunc = new Function('log', code);
+        result = myFunc((arg) => logs.add(arg));
     } catch (e) {
         result = e;
     }
@@ -95,12 +96,13 @@ function Run() {
 
     var serializer = require('../scripts/serializer');
     result = serializer.serialize(result, maxDepth);
+    logs = serializer.serialize(logs, maxDepth);
 
     if (typeof result === 'string' || typeof result === 'boolean' || typeof result === 'number') {
-        return sendJSON({result: [result], executionTime: runtime});
+        return sendJSON({logs: logs, result: [result], executionTime: runtime});
     }
 
-    sendJSON({result: result || {}, executionTime: runtime});
+    sendJSON({logs: logs, result: result || {}, executionTime: runtime});
 }
 
 /**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sfcc_dev_console",
   "private": true,
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "A Salesforce Commerce Cloud (Demandware) Cartridge for Developers.",
   "type": "module",
   "contributors": [

src/App.vue

@@ -13,7 +13,7 @@ import {checkForUpdate, showMessage} from './util.js';
 import {useDefaultStore} from './stores.js';
 
 const store = useDefaultStore();
-const {theme, layout, plainJSON, getJSON, result} = storeToRefs(store);
+const {theme, layout, plainJSON, getResultJSON, result, logs, getLogsJSON} = storeToRefs(store);
 
 const lpane = ref(localStorage.getItem('lpane') || 50);
 const rpane = ref(localStorage.getItem('rpane') || 50);
@@ -81,11 +81,33 @@ window.addEventListener('resize', () => windowWidth.value = document.body.client
       <editor-actions-right/>
 
       <!-- Output -->
-      <div class="output p-2" v-if="result">
-        <pre v-if="plainJSON" ref="outputPlain">{{ getJSON }}</pre>
-        <JsonTreeView v-else :data="getJSON" :max-depth="10" root-key="result"
-                      :color-scheme="theme === 'vs' ? 'light' : 'dark'"/>
-      </div>
+      <template v-if="result">
+        <div class="output">
+          <template v-if="plainJSON">
+            <template v-if="logs.length">
+              <div class="p-2" v-if="logs.length"><pre>{{getLogsJSON}}</pre></div>
+              <hr>
+            </template>
+            <div class="p-2"><pre>{{ getResultJSON }}</pre></div>
+          </template>
+
+          <template v-else>
+            <template v-if="logs.length">
+              <div class="p-2">
+                <JsonTreeView :data="getLogsJSON" :max-depth="10" root-key="logs"
+                              :color-scheme="theme === 'vs' ? 'light' : 'dark'"/>
+              </div>
+
+              <hr>
+            </template>
+
+            <div class="p-2">
+              <JsonTreeView :data="getResultJSON" :max-depth="10" root-key="result"
+                            :color-scheme="theme === 'vs' ? 'light' : 'dark'"/>
+            </div>
+          </template>
+        </div>
+      </template>
     </pane>
   </splitpanes>
 

src/components/ClipboardCopy.vue

@@ -6,7 +6,7 @@ import {TOOLTIP_DELAY} from '../constants.js';
 import {useDefaultStore} from '../stores.js';
 
 const store = useDefaultStore();
-const {result, getJSON} = storeToRefs(store);
+const {result, getResultJSON} = storeToRefs(store);
 const copied = ref(false);
 const copyError = ref(false);
 
@@ -45,7 +45,7 @@ const clipboardErrorHandler = (err) => {
 
 <template>
   <button class="btn" :disabled="!result"
-          v-clipboard:copy="getJSON"
+          v-clipboard:copy="getResultJSON"
           v-clipboard:success="clipboardSuccessHandler"
           v-clipboard:error="clipboardErrorHandler"
           v-tooltip="{ content: 'Copy to Clipboard', delay: { show: TOOLTIP_DELAY } }">

src/components/RunCode.vue

@@ -10,7 +10,7 @@ import {runCode, showMessage} from '../util.js';
 import {useDefaultStore} from '../stores.js';
 
 const store = useDefaultStore();
-const {result, executionTime, layout, tabs, activeTab, editor} = storeToRefs(store);
+const {result, executionTime, logs, layout, tabs, activeTab, editor} = storeToRefs(store);
 const processing = ref(false);
 
 const run = async () => {
@@ -28,6 +28,7 @@ const run = async () => {
     if (response) {
       result.value = response.result;
       executionTime.value = response.executionTime || 1;
+      logs.value = response.logs;
 
       if (layout.value !== 'split') {
         layout.value = 'split';

index.html → src/index.html

@@ -17,6 +17,6 @@
       window.urlPath = '${pdict.urlPath}';
     </script>
 
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="main.js"></script>
   </body>
 </html>

src/scss/_theme.scss

@@ -127,4 +127,19 @@ header {
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-tooltip .v-popper__arrow-outer{
   border-color: var(--tooltip-background-color);
+}
+
+hr {
+  border-color: var(--header-background-color);
+  height: 2px;
+  position: relative;
+
+  &:after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    background-color: var(--left-pane-background-color);
+    position: absolute;
+    bottom: 0;
+  }
 }

src/stores.js

@@ -6,14 +6,16 @@ export const useDefaultStore = defineStore('default', {
         theme: localStorage.getItem('theme') || 'vs-dark',
         editor: null,
         executionTime: null,
+        logs: [],
         result: null,
         plainJSON: localStorage.getItem('plainJSON') === 'true',
         tabs: [{label: 'get session', value: 'return session'}, {label: 'get customer', value: 'return customer'}],
         activeTab: parseInt(localStorage.getItem('activeTab')) || 0
     }),
 
     getters: {
-        getJSON: (state) => JSON.stringify(state.result, null, 2)
+        getResultJSON: (state) => JSON.stringify(state.result, null, 2),
+        getLogsJSON: (state) => JSON.stringify(state.logs, null, 2)
     },
 
     actions: {

vite.config.js

@@ -3,7 +3,22 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  root: 'src',
   plugins: [vue()],
+  build: {
+    outDir: '../cartridge/static/default',
+    emptyOutDir: false,
+    rollupOptions: {
+      output: {
+        assetFileNames: (assetInfo) => {
+          let extType = assetInfo.name.split('.').at(1);
+          return `${extType}/dev_console[extname]`;
+        },
+
+        entryFileNames: 'js/dev_console.js',
+      }
+    }
+  },
   define: {
     '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
   }