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 = "Survey";
+ 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);
+};

examples/jquery-ui/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Welcome to JQuery</title>
+ <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>