Basic survey js jquery form served by webpack

974ae9a3 · Anthony · 7957dab8 · 974ae9a3 · 974ae9a3 · 974ae9a3
Commit 974ae9a3 authored Jun 19, 2024 by Anthony
--- a/.gitignore
+++ b/.gitignore
+/jquery/node_modules/
+/jquery/dist/
+/.idea/
--- a/jquery/node_modules/.package-lock.json
+++ b/jquery/node_modules/.package-lock.json
--- a/jquery/package-lock.json
+++ b/jquery/package-lock.json
--- a/jquery/package.json
+++ b/jquery/package.json
@@ -4,6 +4,7 @@
  "description": "",
  "main": "index.js",
  "scripts": {
+    "dev": "webpack serve --mode development --open",
    "start": "webpack serve --open",
    "build": "webpack"
  },
@@ -14,6 +15,9 @@
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^4.0.0",
    "webpack": "^5.92.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"

--- a/jquery/src/index.html
+++ b/jquery/src/index.html
@@ -4,14 +4,12 @@
    <title>My First Survey</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

-    <script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
    <script type="text/javascript" src="survey-form.js"></script>
    <script type="text/javascript" src="index.js"></script>
-    <link rel="stylesheet" href ="./index.css" />
+    <link rel="stylesheet" href ="style.css" />
 </head>
 <body>
 <div id="surveyContainer"></div>

--- a/jquery/src/index.js
+++ b/jquery/src/index.js
 // const SURVEY_ID = 1;
+import $ from 'jquery';
+import * as Survey from 'survey-jquery';
+import 'survey-core/defaultV2.css';
+import './style.css';
+import {surveyJson} from "./survey-form";


 const survey = new Survey.Model(surveyJson);
-
+console.log("toto")
 function alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);

--- a/jquery/src/index.css
+++ b/jquery/src/index.css
--- a/jquery/src/survey-form.js
+++ b/jquery/src/survey-form.js
-const surveyJson = {
+export const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",

--- a/jquery/src/webpack.config.js
+++ b/jquery/src/webpack.config.js
@@ -9,23 +9,15 @@ module.exports = {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
-        contentBase: path.join(__dirname, 'dist'),
+        static: {
+            directory: path.join(__dirname, 'dist'),
+        },
        compress: true,
        port: 9000,
        hot: true,
    },
    module: {
        rules: [
-            {
-                test: /\.jsx?$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: ['@babel/preset-env', '@babel/preset-react'],
-                    },
-                },
-            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
@@ -37,7 +29,4 @@ module.exports = {
            template: './src/index.html',
        }),
    ],
-    resolve: {
-        extensions: ['.js', '.jsx'],
-    },
 };