PR: pReact implementation

build-scripts/survey-jquery-ui/README.md

@@ -0,0 +1,51 @@
+# SurveyJS jQuery Form Library
+
+
+<video src="https://github.com/surveyjs/survey-library/assets/22315929/b24a68bf-d703-4096-835b-752f5f610aa6"></video>
+
+
+[![Build Status](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_apis/build/status/SurveyJS%20Library?branchName=master)](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
+<a href="https://github.com/DevExpress/testcafe">
+<img alt="Tested with TestCafe" src="https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg">
+</a>
+<a href="https://github.com/surveyjs/survey-library/issues">
+<img alt="Issues" title="Open Issues" src="https://img.shields.io/github/issues/surveyjs/survey-library.svg">
+</a>
+<a href="https://github.com/surveyjs/survey-library/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+">
+<img alt="Closed issues" title="Closed Issues" src="https://img.shields.io/github/issues-closed/surveyjs/survey-library.svg">
+</a>
+
+A free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your jQuery-powered applications.
+
+## Features
+
+- Dynamic forms, surveys, polls, and quizzes for your JavaScript application
+- Integration with React, Angular, Vue, jQuery, and Knockout
+- 20+ built-in question types and support for custom question types
+- Built-in themes and CSS customization
+- Answer validation
+- TypeScript support
+- Community-supported UI localization to 50+ languages
+- Integration with any backend framework (examples for PHP, NodeJS, and ASP.NET included)
+- Compatibility with any server + database combination
+- Third-party component integration
+
+## Get Started
+
+To get started with SurveyJS jQuery Form Library, refer to the following tutorial: [Add a Survey to a jQuery Application](https://surveyjs.io/Documentation/Library?id=get-started-jquery).
+
+## Resources
+
+- [Website](https://surveyjs.io/)
+- [Documentation](https://surveyjs.io/Documentation/Library)
+- [Live Examples](https://surveyjs.io/form-library/examples/nps-question/jquery)
+- [What's New](https://surveyjs.io/WhatsNew)
+
+## Build SurveyJS jQuery Form Library from Sources
+
+Refer to instructions in the root README file: [Build the SurveyJS Form Library from Sources](https://github.com/surveyjs/survey-library#build-the-surveyjs-form-library-from-sources).
+
+## Licensing
+
+SurveyJS Form Library is distributed under the [MIT license](https://github.com/surveyjs/survey-library/blob/master/LICENSE).

build-scripts/survey-jquery-ui/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "survey-jquery-ui",
+  "version": "1.8.33",
+  "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
+  "keywords": [
+    "Survey",
+    "JavaScript",
+    "Bootstrap",
+    "Library",
+    "jquery",
+    "jquery-plugin"
+  ],
+  "homepage": "https://surveyjs.io/",
+  "license": "MIT",
+  "files": [
+    "**/*"
+  ],
+  "main": "survey-jquery-ui.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/surveyjs/surveyjs.git"
+  },
+  "typings": "survey-jquery-ui.d.ts",
+  "dependencies": {
+    "jquery": ">=1.12.4"
+  },
+  "peerDependencies": {
+    "survey-core": "*"
+  }
+}

build-scripts/survey-jquery-ui/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json",
+}

build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "survey-core": [
+        "../../build/survey-core"
+      ]
+    },
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "../../build/survey-jquery-ui/themes/typings/"
+  },
+  "include": [
+    "../../src/themes/index.ts"
+  ]
+}

build-scripts/survey-jquery-ui/tsconfig.typing.jquery-ui.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "lib": [
+      "DOM",
+      "ES5",
+      "ES2015.Promise",
+      "es6"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "survey-core": [
+        "../../build/survey-core"
+      ]
+    },
+    "sourceMap": false,
+    "noImplicitAny": false,
+    "importHelpers": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks": true,
+    "jsx": "react",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "../../src/entries/jquery-ui-model.ts"
+  ],
+}

build-scripts/survey-jquery-ui/webpack.config.js

@@ -0,0 +1,52 @@
+"use strict";
+
+const webpackCommonConfigCreator = require("../webpack.common");
+const DtsGeneratorPlugin = require("../webpack-dts-generator");
+const { merge } = require("webpack-merge");
+var packageJson = require("./package.json");
+var path = require("path");
+
+const config = {
+  entry: {
+    survey: path.resolve(__dirname, "../../src/main.scss"),
+    modern: path.resolve(__dirname, "../../src/modern.scss"),
+    defaultV2: path.resolve(__dirname, "../../src/defaultV2-theme/defaultV2.scss")
+  },
+  resolve: {
+    alias: {
+      "react": "preact/compat",
+      "react-dom/test-utils": "preact/test-utils",
+      "react-dom": "preact/compat",     // Must be below test-utils
+      "react/jsx-runtime": "preact/jsx-runtime"
+    },
+    extensions: ['.ts', '.tsx']
+  },
+  externals: {
+    jquery: {
+      root: "jQuery",
+      commonjs2: "jquery",
+      commonjs: "jquery",
+      amd: "jquery"
+    },
+    "survey-core": {
+      root: "Survey",
+      commonjs2: "survey-core",
+      commonjs: "survey-core",
+      amd: "survey-core"
+    }
+  },
+  plugins: [
+    new DtsGeneratorPlugin({
+      tsConfigPath: "./build-scripts/survey-jquery-ui/tsconfig.typing.jquery-ui.json",
+      filePath: "build/survey-jquery-ui/survey.jquery-ui.d.ts",
+      moduleName: "survey-jquery-ui",
+      importName: "entries/jquery-ui"
+    }),
+  ],
+};
+
+module.exports = function (options) {
+  options.platform = "jquery-ui";
+  options.libraryName = "SurveyJquery";
+  return merge(webpackCommonConfigCreator(options, packageJson, "survey.jquery.ui"), config);
+}

build-scripts/survey-jquery-ui/webpack.themes.config.js

@@ -0,0 +1,77 @@
+"use strict";
+
+const webpackCommonConfigCreator = require("../webpack.common");
+const { merge } = require("webpack-merge");
+var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
+const DtsGeneratorPlugin = require("../webpack-dts-generator");
+var path = require("path");
+
+const config = {
+  entry: {
+    "default-light": path.resolve(__dirname, "../../src/themes/default-light.ts"),
+    "default-dark": path.resolve(__dirname, "../../src/themes/default-dark.ts"),
+    "default-light-panelless": path.resolve(__dirname, "../../src/themes/default-light-panelless.ts"),
+    "default-dark-panelless": path.resolve(__dirname, "../../src/themes/default-dark-panelless.ts"),
+    "sharp-light": path.resolve(__dirname, "../../src/themes/sharp-light.ts"),
+    "sharp-dark": path.resolve(__dirname, "../../src/themes/sharp-dark.ts"),
+    "sharp-light-panelless": path.resolve(__dirname, "../../src/themes/sharp-light-panelless.ts"),
+    "sharp-dark-panelless": path.resolve(__dirname, "../../src/themes/sharp-dark-panelless.ts"),
+    "borderless-light": path.resolve(__dirname, "../../src/themes/borderless-light.ts"),
+    "borderless-dark": path.resolve(__dirname, "../../src/themes/borderless-dark.ts"),
+    "borderless-light-panelless.": path.resolve(__dirname, "../../src/themes/borderless-light-panelless.ts"),
+    "borderless-dark-panelless": path.resolve(__dirname, "../../src/themes/borderless-dark-panelless.ts"),
+    "flat-light": path.resolve(__dirname, "../../src/themes/flat-light.ts"),
+    "flat-dark": path.resolve(__dirname, "../../src/themes/flat-dark.ts"),
+    "flat-light-panelless": path.resolve(__dirname, "../../src/themes/flat-light-panelless.ts"),
+    "flat-dark-panelless": path.resolve(__dirname, "../../src/themes/flat-dark-panelless.ts"),
+    "plain-light": path.resolve(__dirname, "../../src/themes/plain-light.ts"),
+    "plain-dark": path.resolve(__dirname, "../../src/themes/plain-dark.ts"),
+    "plain-light-panelless": path.resolve(__dirname, "../../src/themes/plain-light-panelless.ts"),
+    "plain-dark-panelless": path.resolve(__dirname, "../../src/themes/plain-dark-panelless.ts"),
+    "doubleborder-light": path.resolve(__dirname, "../../src/themes/doubleborder-light.ts"),
+    "doubleborder-dark": path.resolve(__dirname, "../../src/themes/doubleborder-dark.ts"),
+    "doubleborder-light-panelles": path.resolve(__dirname, "../../src/themes/doubleborder-light-panelless.ts"),
+    "doubleborder-dark-panelless": path.resolve(__dirname, "../../src/themes/doubleborder-dark-panelless.ts"),
+    "layered-light": path.resolve(__dirname, "../../src/themes/layered-light.ts"),
+    "layered-dark": path.resolve(__dirname, "../../src/themes/layered-dark.ts"),
+    "layered-light-panelless": path.resolve(__dirname, "../../src/themes/layered-light-panelless.ts"),
+    "layered-dark-panelless": path.resolve(__dirname, "../../src/themes/layered-dark-panelless.ts"),
+    "solid-light": path.resolve(__dirname, "../../src/themes/solid-light.ts"),
+    "solid-dark": path.resolve(__dirname, "../../src/themes/solid-dark.ts"),
+    "solid-light-panelless": path.resolve(__dirname, "../../src/themes/solid-light-panelless.ts"),
+    "solid-dark-panelless": path.resolve(__dirname, "../../src/themes/solid-dark-panelless.ts"),
+    "three-dimensional-light": path.resolve(__dirname, "../../src/themes/threedimensional-light.ts"),
+    "three-dimensional-dark": path.resolve(__dirname, "../../src/themes/threedimensional-dark.ts"),
+    "three-dimensional-light-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-light-panelless.ts"),
+    "three-dimensional-dark-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-dark-panelless.ts"),
+    "contrast-light": path.resolve(__dirname, "../../src/themes/contrast-light.ts"),
+    "contrast-dark": path.resolve(__dirname, "../../src/themes/contrast-dark.ts"),
+    "contrast-light-panelless": path.resolve(__dirname, "../../src/themes/contrast-light-panelless.ts"),
+    "contrast-dark-panelless": path.resolve(__dirname, "../../src/themes/contrast-dark-panelless.ts"),
+    "index": path.resolve(__dirname, "../../src/themes/index.ts"),
+  },
+  plugins: [new FixStyleOnlyEntriesPlugin()],
+  externals: {
+    "survey-core": {
+      root: "Survey",
+      commonjs2: "survey-core",
+      commonjs: "survey-core",
+      amd: "survey-core"
+    }
+  }
+};
+
+module.exports = function (options) {
+  options.platform = "";
+  options.libraryName = "SurveyTheme";
+  if (options.buildType !== "prod") {
+    config.plugins.push(new DtsGeneratorPlugin({
+      tsConfigPath: "./build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json",
+      filePath: "build/survey-jquery-ui/themes/index.d.ts",
+      moduleName: "survey-jquery-ui/themes",
+      importName: "index"
+    }));
+  }
+
+  return merge(webpackCommonConfigCreator(options, { "name": "survey-themes" }, "survey.themes", "survey-jquery-ui/themes"), config);
+};

devops-pull-requests-parallel-jobs.yml

@@ -303,4 +303,66 @@ jobs:
         npm run testcafe:ci:vue3
       displayName: "run functional tests"
 
+- job: JqueryUIPreact
+  steps:
+    - checkout: self
+      persistCredentials: true
+      clean: true
+
+    - task: NodeTool@0
+      inputs:
+        versionSpec: "14.x"
+      displayName: "Install Node.js"
+
+    - task: CopyFiles@2
+      inputs:
+        SourceFolder: "$(Build.SourcesDirectory)/"
+        Contents: "package.json"
+        TargetFolder: "$(Build.SourcesDirectory)/Temp/"
+        OverWrite: true
+      displayName: "Copy package.json for cache key"
+
+    - task: Cache@2
+      inputs:
+        key: 'npm-cache-library | $(Build.SourcesDirectory)/Temp/package.json'
+        path: $(Build.SourcesDirectory)/node_modules
+        cacheHitVar: NPM_CACHE_RESTORED
+      displayName: Cache NPMs
+
+    - task: Npm@1
+      displayName: 'NPM install'
+      inputs:
+        command: install
+        verbose: false
+      condition: ne(variables.NPM_CACHE_RESTORED, 'true')
+
+    - script: |
+        npm run build_core
+        npm run build_i18n
+        npm run build-plugins
+      displayName: "Build Core"
+
+    - script: |
+        npm run build_jquery-ui_prod
+      displayName: "Build jquery-ui_prod"
+
+    - script: |
+        npm run test:postcss
+      displayName: "check postcss compatibility"
+
+    - script: |
+        npm run testsingle
+      displayName: "run unit tests"
+
+    - script: |
+        npm run lint
+      displayName: "eslint check"
+
+    # - script: |
+    #     npm run test:jquery-ui:single
+    #   displayName: "run markup tests"
+
+    - script: |
+        npm run testcafe:jquery-ui
+      displayName: "run functional tests"
 

examples/jquery-ui/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Welcome to JQuery</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.22.0/preact.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"> -->
+    <link rel="stylesheet" href="../../build/survey-jquery-ui/survey.css" />
+    <!-- <link rel="stylesheet" href="../../build/survey-jquery-ui/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-jquery-ui/defaultV2.css" />
+    <script src="../../build/survey-core/survey.core.js"></script>
+    <script src="../../build/survey-jquery-ui/survey.jquery.ui.js"></script>
+  </head>
+
+  <body>
+    <div id="surveyElement"></div>
+    <div id="surveyResultElement"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>