fix CDN

HGGshiwo · Jul 22, 2024 · f2b8642 · f2b8642
1 parent fb9625e
commit f2b8642
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -22,21 +22,37 @@ Use npm
 npm install jspsych-vue
 ```
 
-**Note**: To use jspsych-vue, you should also add jspsych(v7) to your project, both CDN and npm install are supported. For more details, see [https://www.jspsych.org/latest/tutorials/hello-world/](https://www.jspsych.org/latest/tutorials/hello-world/)
+**Note**: To use jspsych-vue, you should also add jspsych(v7) to your project, both npm install and CDN are supported. For more details, see [https://www.jspsych.org/latest/tutorials/hello-world/](https://www.jspsych.org/latest/tutorials/hello-world/)
 
-Add css files in your main.js, which is look like:
+CDN are recommond.
+
+Add css files to your project, which is look like:
 
 ```js
 import './assets/main.css'
 import 'jspsych-vue/dist/style.css'
-import 'jspsych/css/jspsych.css'
+import 'jspsych/css/jspsych.css' // if use CDN, do not add this line.
 
 import { createApp } from 'vue'
 import App from './App.vue'
 
 createApp(App).mount('#app')
 ```
 
+Then in your component, you should pass options to init jspsych object. For npm user, you should also pass module props.
+
+```html
+<script lang="ts" setup>
+  import * as jsPsychModule from 'jspsych' // for npm user
+  const options = {...} // any options
+</script>
+<template>
+  <JsPsych :options="options"></JsPsych>
+  <!-- for npm user, use module props -->
+  <JsPsych :options="options" :module="jsPsychModule"></JsPsych>
+</template>
+```
+
 That's all!
 
 ## Bassic Usage

diff --git a/example/App.vue b/example/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <JsPsychVue :options="options" @init="init">
+  <JsPsychVue :module="jsPsychModule" :options="options" @init="init">
     <button type="button" class="btn btn-primary m-3" @click="run1">Run Hello World</button>
     <button type="button" class="btn btn-primary m-3" @click="run2">Run Reaction Time</button>
   </JsPsychVue>
@@ -27,6 +27,7 @@ import JsPsychVue from "../src/JsPsych.vue";
 import timeline1 from "./timeline/HelloWorld";
 import timeline2 from "./timeline/Responce";
 import Modal from "./components/Modal.vue";
+import * as jsPsychModule from 'jspsych';
 
 let jsPsych: any;
 const showModal = ref(false)

diff --git a/example/components/HelloWorld.vue b/example/components/HelloWorld.vue
@@ -62,10 +62,9 @@
 </template>
 
 <script setup lang="ts">
-import { JsPsych } from "jspsych";
 import { inject } from "vue";
 
-const jsPsych: JsPsych = inject('jsPsych')!
+const jsPsych: any = inject('jsPsych')!
 const props = defineProps(['trial', 'on_load'])
 
 const handleClick = () => jsPsych.finishTrial()

diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
       crossorigin="anonymous"
     />
-    <script src="https://www.naodao.com/public/experiment/libs/jspsych-7/jspsych.js"></script>
+    <!-- <script src="https://unpkg.com/jspsych@8.0.0"></script> -->
+    <!-- <link href="https://unpkg.com/jspsych@8.0.0/css/jspsych.css" rel="stylesheet" type="text/css" /> -->
     <title>Vite App</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.5",
+    "@types/node": "^20.14.11",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -58,11 +58,13 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.1.0",
+    "jspsych": "^8.0.1",
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.2.5",
     "sass": "^1.77.6",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
+    "vite-plugin-require-transform": "^1.0.21",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.21"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/JsPsych.vue b/src/JsPsych.vue
@@ -1,11 +1,7 @@
 <script lang="ts">
 import { defineComponent, h, onMounted, provide, ref, shallowRef, getCurrentInstance } from 'vue';
-const _JspsychModule = 'JspsychModule' in window ? window.JspsychModule : await import('jspsych');
-
-const { JsPsych, initJsPsych } = _JspsychModule as any;
 import { nanoid } from 'nanoid';
 
-
 const createJsPsychContent = (component = undefined, experiment_width = "100%", trialFn: Function | undefined = undefined) => {
   return defineComponent({
     props: {
@@ -16,7 +12,7 @@ const createJsPsychContent = (component = undefined, experiment_width = "100%",
       on_load: {
         type: Function,
         required: false
-      }
+      },
     },
     render() {
       var config: Record<string, any> = {
@@ -70,10 +66,20 @@ export default {
     options: {
       type: Object,
       default: () => ({})
+    },
+    module: {
+      type: Object,
+      required: false
     }
   },
   emits: ['init'],
   setup(props, { slots }: any) {
+    const jspsychModule = 'jsPsychModule' in window ? window.jsPsychModule : props.module;
+    if (!jspsychModule) {
+      console.error('JsPsych module is not found. You can either install it using npm, then passing it as module prop to JsPsychVue component or use CDN to load it.')
+    }
+    const { JsPsych, initJsPsych } = jspsychModule as any;
+
     const curComp = shallowRef<any>()
     const curTrial = ref<any>()
     const curOnLoad = ref<any>()
@@ -82,25 +88,26 @@ export default {
     const content_element = ref()
     const key = ref();
 
-    (JsPsych as any).prototype.prepareDom = function () {
+    JsPsych.prototype.prepareDom = function () {
       let display_element = parseDisplayElement(props.options.display_element)
       this.displayContainerElement = display_element
       this.DOM_container = this.displayContainerElement
 
       this.contentElement = document.querySelector("#jspsych-content")
       this.DOM_target = this.contentElement
+      this.displayElement = this.contentElement
 
       this.data.createInteractionListeners();
       window.addEventListener("beforeunload", props.options.on_close);
     };
 
-    var _run = (JsPsych as any).prototype.run;
-    (JsPsych as any).prototype.run = function (timeline: any) {
+    var _run = JsPsych.prototype.run;
+    JsPsych.prototype.run = function (timeline: any) {
       return _run.call(this, convertTimeline(timeline))
     };
 
-    var _addNodeToEndOfTimeline = (JsPsych as any).prototype.addNodeToEndOfTimeline;
-    (JsPsych as any).prototype.addNodeToEndOfTimeline = function (node: any) {
+    var _addNodeToEndOfTimeline = JsPsych.prototype.addNodeToEndOfTimeline;
+    JsPsych.prototype.addNodeToEndOfTimeline = function (node: any) {
       return _addNodeToEndOfTimeline.call(this, convertTimeline(node))
     };
 
@@ -172,6 +179,7 @@ export default {
       }
     }
 
+
     jsPsych.data.displayData = (config: any) => {
       var format = config.format || "json";
       format = format.toLowerCase();
@@ -180,10 +188,12 @@ export default {
         format = "json";
       }
 
-      const data_string = format === "json" ? jsPsych.data.allData.json(true) : jsPsych.data.allData.csv();
+      let data = jsPsych.data.allData ? jsPsych.data.allData : jsPsych.data.results;
+      const data_string = format === "json" ? data.json(true) : data.csv();
       var _display_element = config.dom || display_element
       _display_element.innerHTML = '<pre id="jspsych-data-display"></pre>';
       document.getElementById("jspsych-data-display")!.textContent = data_string;
+
     }
 
     return {