@slidev/client 0.49.0-beta.1 → 0.49.0-beta.3

package/internals/QuickOverview.vue

@@ -102,6 +102,11 @@ watchEffect(() => {
   // Watch rowCount, make sure up and down shortcut work correctly.
   overviewRowCount.value = rowCount.value
 })
+
+const activeSlidesLoaded = ref(false)
+setTimeout(() => {
+  activeSlidesLoaded.value = true
+}, 3000)
 </script>
 
 <template>
@@ -112,6 +117,7 @@ watchEffect(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
+      v-if="value || activeSlidesLoaded"
       v-show="value"
       class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"

package/logic/contextMenu.ts

@@ -0,0 +1,34 @@
+import type { ContextMenuItem } from '@slidev/types'
+import type { ComputedRef } from 'vue'
+import { shallowRef } from 'vue'
+import setupContextMenu from '../setup/context-menu'
+import { configs, mode } from '../env'
+
+export const currentContextMenu = shallowRef<null | {
+  x: number
+  y: number
+  items: ComputedRef<ContextMenuItem[]>
+}>(null)
+
+export function openContextMenu(x: number, y: number) {
+  currentContextMenu.value = {
+    x,
+    y,
+    items: setupContextMenu(),
+  }
+}
+
+export function closeContextMenu() {
+  currentContextMenu.value = null
+}
+
+export function onContextMenu(ev: MouseEvent) {
+  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+    return
+  if (ev.shiftKey || ev.defaultPrevented)
+    return
+
+  openContextMenu(ev.pageX, ev.pageY)
+  ev.preventDefault()
+  ev.stopPropagation()
+}

package/logic/utils.ts

@@ -32,24 +32,6 @@ export function makeId(length = 5) {
   return result.join('')
 }
 
-/**
- *   '+3' => '+3'
- *   '-3' => '-3'
- *    '3' => 3
- *      3 => 3
- */
-export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolean, value: number] {
-  let n = +at
-  if (Number.isNaN(n)) {
-    console.warn('[slidev] Invalid click position:', at)
-    n = 0
-  }
-  return [
-    typeof at === 'string' && '+-'.includes(at[0]),
-    n,
-  ]
-}
-
 export function updateCodeHighlightRange(
   rangeStr: string,
   linesCount: number,

package/modules/v-click.ts

@@ -1,6 +1,6 @@
-import type { ResolvedClicksInfo } from '@slidev/types'
 import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
+import type { ClicksElement, RawAtValue } from '@slidev/types'
 import {
   CLASS_VCLICK_CURRENT,
   CLASS_VCLICK_FADE,
@@ -8,32 +8,29 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
-  injectionClickVisibility,
   injectionClicksContext,
 } from '../constants'
-import { directiveInject, directiveProvide } from '../utils'
-
-export type VClickValue = undefined | string | number | [string | number, string | number] | boolean
+import { directiveInject } from '../utils'
+import { normalizeAtValue } from '../composables/useClicks'
 
 export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive<HTMLElement, VClickValue>('click', {
+      app.directive<HTMLElement, RawAtValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true)
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
           // Expose the resolved clicks info to the element to make it easier to understand and debug
-          const clicks = Array.isArray(resolved.clicks) ? resolved.clicks : [resolved.clicks, undefined]
-          el.dataset.slidevClicksStart = String(clicks[0])
-          if (clicks[1] != null)
-            el.dataset.slidevClicksEnd = String(clicks[1])
+          el.dataset.slidevClicksStart = String(resolved.start)
+          if (Number.isFinite(resolved.end))
+            el.dataset.slidevClicksEnd = String(resolved.end)
 
           // @ts-expect-error extra prop
           el.watchStopHandle = watchEffect(() => {
@@ -56,12 +53,12 @@ export function createVClickDirectives() {
         unmounted,
       })
 
-      app.directive<HTMLElement, VClickValue>('after', {
+      app.directive<HTMLElement, RawAtValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true, true)
+          const resolved = resolveClick(el, dir, '+0')
           if (resolved == null)
             return
 
@@ -88,12 +85,12 @@ export function createVClickDirectives() {
         unmounted,
       })
 
-      app.directive<HTMLElement, VClickValue>('click-hide', {
+      app.directive<HTMLElement, RawAtValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true, false, true)
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -118,75 +115,42 @@ export function createVClickDirectives() {
   }
 }
 
-function isClickActive(thisClick: number | [number, number], clicks: number) {
-  return Array.isArray(thisClick)
-    ? thisClick[0] <= clicks && clicks < thisClick[1]
-    : thisClick <= clicks
-}
+export const resolvedClickMap = new Map<ClicksElement, ReturnType<typeof resolveClick>>()
 
-function isClickCurrent(thisClick: number | [number, number], clicks: number) {
-  return Array.isArray(thisClick)
-    ? thisClick[0] === clicks
-    : thisClick === clicks
-}
-
-export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: VClickValue, provideVisibility = false, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: RawAtValue, explicitHide = false) {
   const ctx = directiveInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx)
     return null
 
-  if (value === false || value === 'false')
-    return null
-
-  flagHide ||= dir.modifiers.hide !== false && dir.modifiers.hide != null
+  const flagHide = explicitHide || (dir.modifiers.hide !== false && dir.modifiers.hide != null)
   const flagFade = dir.modifiers.fade !== false && dir.modifiers.fade != null
 
-  if (clickAfter)
-    value = '+0'
-  else if (value == null || value === true || value === 'true')
-    value = '+1'
-
-  let delta: number
-  let thisClick: number | [number, number]
-  let maxClick: number
-  if (Array.isArray(value)) {
-    // range (absolute)
-    delta = 0
-    thisClick = [+value[0], +value[1]]
-    maxClick = +value[1]
-  }
-  else {
-    ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
-  }
+  const at = normalizeAtValue(value)
+  const info = ctx.calculate(at)
+  if (!info)
+    return null
 
-  const isActive = computed(() => isClickActive(thisClick, ctx.current))
-  const isCurrent = computed(() => isClickCurrent(thisClick, ctx.current))
-  const isShown = computed(() => flagHide ? !isActive.value : isActive.value)
+  ctx.register(el, info)
 
-  const resolved: ResolvedClicksInfo = {
-    max: maxClick,
-    clicks: thisClick,
-    delta,
-    isActive,
-    isCurrent,
+  const isShown = computed(() => flagHide ? !info.isActive.value : info.isActive.value)
+  const visibilityState = computed(() => {
+    if (isShown.value)
+      return 'shown'
+    if (Number.isFinite(info.end))
+      return ctx.current < info.start ? 'before' : 'after'
+    else
+      return flagHide ? 'after' : 'before'
+  })
+
+  const resolved = {
+    ...info,
     isShown,
+    visibilityState,
     flagFade,
     flagHide,
   }
-  ctx.register(el, resolved)
-
-  if (provideVisibility) {
-    directiveProvide(dir, injectionClickVisibility, computed(() => {
-      if (isShown.value)
-        return true
-      if (Array.isArray(thisClick))
-        return ctx.current < thisClick[0] ? 'before' : 'after'
-      else
-        return flagHide ? 'after' : 'before'
-    }))
-  }
-
+  resolvedClickMap.set(el, resolved)
   return resolved
 }
 

package/modules/v-mark.ts

@@ -2,14 +2,14 @@ import type { RoughAnnotationConfig } from '@slidev/rough-notation'
 import { annotate } from '@slidev/rough-notation'
 import type { App } from 'vue'
 import { computed, watchEffect } from 'vue'
-import type { VClickValue } from './v-click'
+import type { RawAtValue } from '@slidev/types'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
-  at: VClickValue
+  at: RawAtValue
 }
 
-export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+export type RoughDirectiveValue = RawAtValue | RoughDirectiveOptions
 
 function addClass(options: RoughDirectiveOptions, cls: string) {
   options.class = [options.class, cls].filter(Boolean).join(' ')

package/modules/v-motion.ts

@@ -1,18 +1,12 @@
 import type { App, ObjectDirective } from 'vue'
 import { watch } from 'vue'
 import { MotionDirective } from '@vueuse/motion'
-import type { ResolvedClicksInfo } from '@slidev/types'
-import { injectionClickVisibility, injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import type { ClicksInfo } from '@slidev/types'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
 import { useNav } from '../composables/useNav'
 import { makeId } from '../logic/utils'
 import { directiveInject } from '../utils'
-import type { VClickValue } from './v-click'
-import { resolveClick } from './v-click'
-
-export type MotionDirectiveValue = undefined | VClickValue | {
-  key?: string
-  at?: VClickValue
-}
+import { resolvedClickMap } from './v-click'
 
 export function createVMotionDirectives() {
   return {
@@ -22,6 +16,11 @@ export function createVMotionDirectives() {
         // @ts-expect-error extra prop
         name: 'v-motion',
         mounted(el, binding, node, prevNode) {
+          const clicksContext = directiveInject(binding, injectionClicksContext)
+          const thisPage = directiveInject(binding, injectionCurrentPage)
+          const renderContext = directiveInject(binding, injectionRenderContext)
+          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
+
           const props = node.props = { ...node.props }
 
           const variantInitial = { ...props.initial, ...props.variants?.['slidev-initial'] }
@@ -36,7 +35,7 @@ export function createVMotionDirectives() {
             id: string
             at: number | [number, number]
             variant: Record<string, unknown>
-            resolved: ResolvedClicksInfo | null
+            info: ClicksInfo | null | undefined
           }[] = []
 
           for (const k of Object.keys(props)) {
@@ -48,7 +47,7 @@ export function createVMotionDirectives() {
                 id,
                 at,
                 variant: { ...props[k] },
-                resolved: resolveClick(id, binding, at),
+                info: clicksContext?.value.calculate(at),
               })
               delete props[k]
             }
@@ -59,11 +58,6 @@ export function createVMotionDirectives() {
           original.created!(el, binding, node, prevNode)
           original.mounted!(el, binding, node, prevNode)
 
-          const thisPage = directiveInject(binding, injectionCurrentPage)
-          const renderContext = directiveInject(binding, injectionRenderContext)
-          const clickVisibility = directiveInject(binding, injectionClickVisibility)
-          const clicksContext = directiveInject(binding, injectionClicksContext)
-          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
           // @ts-expect-error extra prop
           const motion = el.motionInstance
           motion.clickIds = clicks.map(i => i.id)
@@ -71,7 +65,7 @@ export function createVMotionDirectives() {
           motion.watchStopHandle = watch(
             [thisPage, currentPage, currentClicks].filter(Boolean),
             () => {
-              const visibility = clickVisibility?.value ?? true
+              const visibility = resolvedClickMap.get(el)?.visibilityState.value ?? 'shown'
               if (!clicksContext?.value || !['slide', 'presenter'].includes(renderContext?.value ?? '')) {
                 const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
                 for (const { variant } of clicks)
@@ -80,10 +74,10 @@ export function createVMotionDirectives() {
                 motion.set(mixedVariant)
               }
               else if (isPrintMode.value || thisPage?.value === currentPage.value) {
-                if (visibility === true) {
+                if (visibility === 'shown') {
                   const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
-                  for (const { variant, resolved: resolvedClick } of clicks) {
-                    if (!resolvedClick || resolvedClick.isActive.value)
+                  for (const { variant, info } of clicks) {
+                    if (!info || info.isActive.value)
                       Object.assign(mixedVariant, variant)
                   }
                   if (isPrintMode.value)
@@ -104,14 +98,9 @@ export function createVMotionDirectives() {
             },
           )
         },
-        unmounted(el, dir) {
-          if (!directiveInject(dir, injectionClicksContext)?.value)
-            return
-
-          const ctx = directiveInject(dir, injectionClicksContext)?.value
+        unmounted(el) {
           // @ts-expect-error extra prop
           const motion = el.motionInstance
-          motion.clickIds.map((id: string) => ctx?.unregister(id))
           motion.watchStopHandle()
         },
       })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.0-beta.1",
+  "version": "0.49.0-beta.3",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "@shikijs/vitepress-twoslash": "^1.3.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.9.4",
-    "@unocss/reset": "^0.59.0",
+    "@unhead/vue": "^1.9.5",
+    "@unocss/reset": "^0.59.2",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -46,7 +46,6 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
@@ -55,13 +54,14 @@
     "recordrtc": "^5.6.2",
     "shiki": "^1.3.0",
     "shiki-magic-move": "^0.3.5",
-    "typescript": "^5.4.4",
-    "unocss": "^0.59.0",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.2",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.49.0-beta.1",
-    "@slidev/types": "0.49.0-beta.1"
+    "yaml": "^2.4.1",
+    "@slidev/parser": "0.49.0-beta.3",
+    "@slidev/types": "0.49.0-beta.3"
   },
   "devDependencies": {
     "vite": "^5.2.8"

package/pages/play.vue

@@ -9,6 +9,7 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 
@@ -22,9 +23,9 @@ function onClick(e: MouseEvent) {
   if (showEditor.value)
     return
 
-  if ((e.target as HTMLElement)?.id === 'slide-container') {
+  if (e.button === 0 && (e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previous
-    if ((e.screenX / window.innerWidth) > 0.6)
+    if ((e.pageX / window.innerWidth) > 0.6)
       next()
     else
       prev()
@@ -57,6 +58,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :scale="slideScale"
       :is-main="true"
       @pointerdown="onClick"
+      @contextmenu="onContextMenu"
     >
       <template #default>
         <SlidesShow render-context="slide" />

package/pages/presenter.vue

@@ -7,6 +7,7 @@ import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout,
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
+import { onContextMenu } from '../logic/contextMenu'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
@@ -21,6 +22,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
+import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 
@@ -112,6 +114,7 @@ onMounted(() => {
         <SlideContainer
           key="main"
           class="h-full w-full p-2 lg:p-4 flex-auto"
+          @contextmenu="onContextMenu"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
@@ -209,6 +212,7 @@ onMounted(() => {
   </div>
   <Goto />
   <QuickOverview v-model="showOverview" />
+  <ContextMenu />
 </template>
 
 <style scoped>

package/setup/code-runners.ts

@@ -26,9 +26,9 @@ export default createSingletonPromise(async () => {
   })
 
   const resolveId = async (specifier: string) => {
-    if (!/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
-      return specifier
-    const res = await fetch(`/@slidev/resolve-id/${specifier}`)
+    if (!'./'.includes(specifier[0]) && !/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
+      return specifier // this might be a url or something else
+    const res = await fetch(`/@slidev/resolve-id?specifier=${specifier}`)
     if (!res.ok)
       return null
     const id = await res.text()
@@ -85,7 +85,10 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
   replace.clear = () => allLogs.length = 0
   const vmConsole = Object.assign({}, console, replace)
   try {
-    const safeJS = `return async (console) => {${sanitizeJS(code)}}`
+    const safeJS = `return async (console) => {
+      window.console = console
+      ${sanitizeJS(code)}
+    }`
     // eslint-disable-next-line no-new-func
     await (new Function(safeJS)())(vmConsole)
   }

package/setup/context-menu.ts

@@ -0,0 +1,113 @@
+/// <reference types="unplugin-icons/types/vue3" />
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import type { ContextMenuItem } from '@slidev/types'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
+import { fullscreen, showEditor, toggleOverview } from '../state'
+import setups from '#slidev/setups/context-menu'
+
+import IconArrowLeft from '~icons/carbon/arrow-left'
+import IconArrowRight from '~icons/carbon/arrow-right'
+import IconArrowUp from '~icons/carbon/arrow-up'
+import IconArrowDown from '~icons/carbon/arrow-down'
+import IconPen from '~icons/carbon/pen'
+import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
+import IconApps from '~icons/carbon/apps'
+import IconPresentationFile from '~icons/carbon/presentation-file'
+import IconUserSpeaker from '~icons/carbon/user-speaker'
+import IconMaximize from '~icons/carbon/maximize'
+import IconMinimize from '~icons/carbon/minimize'
+
+let items: ComputedRef<ContextMenuItem[]> | undefined
+
+export default () => {
+  if (items)
+    return items
+
+  const {
+    next,
+    nextSlide,
+    prev,
+    prevSlide,
+    hasNext,
+    hasPrev,
+    currentPage,
+    total,
+    isPresenter,
+    enterPresenter,
+    exitPresenter,
+    isEmbedded,
+    isPresenterAvailable,
+  } = useNav()
+  const { drawingEnabled } = useDrawings()
+  const {
+    isFullscreen,
+    toggle: toggleFullscreen,
+  } = fullscreen
+
+  return items = setups.reduce(
+    (items, fn) => fn(items),
+    computed(() => [
+      {
+        small: true,
+        icon: IconArrowLeft,
+        label: 'Previous Click',
+        action: prev,
+        disabled: !hasPrev.value,
+      },
+      {
+        small: true,
+        icon: IconArrowRight,
+        label: 'Next Click',
+        action: next,
+        disabled: !hasNext.value,
+      },
+      {
+        small: true,
+        icon: IconArrowUp,
+        label: 'Previous Slide',
+        action: prevSlide,
+        disabled: currentPage.value <= 1,
+      },
+      {
+        small: true,
+        icon: IconArrowDown,
+        label: 'Next Slide',
+        action: nextSlide,
+        disabled: currentPage.value >= total.value,
+      },
+      'separator',
+      {
+        icon: IconTextNotationToggle,
+        label: showEditor.value ? 'Hide editor' : 'Show editor',
+        action: () => (showEditor.value = !showEditor.value),
+      },
+      {
+        icon: IconPen,
+        label: drawingEnabled.value ? 'Hide drawing toolbar' : 'Show drawing toolbar',
+        action: () => (drawingEnabled.value = !drawingEnabled.value),
+      },
+      {
+        icon: IconApps,
+        label: 'Show slide overview',
+        action: toggleOverview,
+      },
+      isPresenter.value && {
+        icon: IconPresentationFile,
+        label: 'Exit Presenter Mode',
+        action: exitPresenter,
+      },
+      __SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable.value && {
+        icon: IconUserSpeaker,
+        label: 'Enter Presenter Mode',
+        action: enterPresenter,
+      },
+      !isEmbedded.value && {
+        icon: isFullscreen.value ? IconMinimize : IconMaximize,
+        label: isFullscreen.value ? 'Close fullscreen' : 'Enter fullscreen',
+        action: toggleFullscreen,
+      },
+    ].filter(Boolean) as ContextMenuItem[]),
+  )
+}

package/setup/main.ts

@@ -9,7 +9,7 @@ import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
 import { createVMotionDirectives } from '../modules/v-motion'
-import { routes } from '../routes'
+import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
@@ -28,7 +28,7 @@ export default async function setupMain(app: App) {
     history: __SLIDEV_HASH_ROUTE__
       ? createWebHashHistory(import.meta.env.BASE_URL)
       : createWebHistory(import.meta.env.BASE_URL),
-    routes,
+    routes: setupRoutes(),
   })
 
   app.use(router)

package/setup/monaco.ts

@@ -66,9 +66,6 @@ const setup = createSingletonPromise(async () => {
     module: monaco.languages.typescript.ModuleKind.ESNext,
   })
 
-  // Load types from server
-  import('#slidev/monaco-types')
-
   const ata = configs.monacoTypesSource === 'cdn'
     ? setupTypeAcquisition({
       projectName: 'TypeScript Playground',