Move to SurveyJS Library V2

Author: andrewtelnov

Views/Home/EditForm.cshtml

@@ -1,12 +1,11 @@
 @model EditFormModel
-<script src="https://unpkg.com/[email protected]/build/output/knockout-latest.js"></script>
 <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
 <script src="https://unpkg.com/survey-core/survey.i18n.min.js"></script>
-<script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
+<script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
 <script src="https://unpkg.com/survey-creator-core/survey-creator-core.min.js"></script>
 <script src="https://unpkg.com/survey-creator-core/survey-creator-core.i18n.min.js"></script>
-<script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/survey-core/defaultV2.min.css" />
+<script src="https://unpkg.com/survey-creator-js/survey-creator-js.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/survey-core/survey-core.min.css" />
 <link rel="stylesheet" href="https://unpkg.com/survey-creator-core/survey-creator-core.css" />
 <script src="~/js/form_api.js" asp-append-version="true"></script>
 <script src="~/js/creatorjs.js" asp-append-version="true"></script>

Views/Home/FormResponse.cshtml

@@ -1,27 +1,23 @@
 @model FormResponseModel
-<script src="https://unpkg.com/[email protected]/build/output/knockout-latest.js"></script>
 <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
 <script src="https://unpkg.com/survey-core/survey.i18n.min.js"></script>
-<script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/survey-core/defaultV2.min.css" />
+<script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/survey-core/survey-core.min.css" />
 <script src="~/js/form_api.js" asp-append-version="true"></script>
 <script src="~/js/surveyjs.js" asp-append-version="true"></script>
 @{
     ViewData["Title"] = "Fill Out a Form: " + Model.FormName;
 }
 <div id="surveyElement" style="display: inline-block; width: 100%;">
-    <div id="idLoading">Loading...</div>
-    <survey params="survey: model"></survey>
 </div>
 <script>
     loadFormAndData("@Model.FormName", "@Model.Id", showForm);
+    const survey = new Survey.SurveyModel();
+    survey.beginLoading();
     function showForm(json, data) {
-        document.getElementById("idLoading").style.display = "none";
-        const survey = new SurveyKnockout.SurveyModel(json);
+        survey.fromJSON(json);
         setupSurveyModel(survey, "@Model.FormName");
         survey.data = data;
-        ko.applyBindings({
-            model: survey
-        }, document.getElementById("surveyElement"));
+        survey.render(document.getElementById("surveyElement"));
     }
 </script>

wwwroot/js/creatorjs.js

@@ -67,27 +67,25 @@ function setupCreatorForContentManager(creator) {
     });
 }
 
-const SERVER_CODE_TAB_COMPONENT_NAME = "svc-tab-servercode";
+const SERVER_CODE_TAB_COMPONENT_NAME = "SERVER_CODE_TAB_COMPONENT_NAME";
 
 // Product managers can make any changes in a form JSON schema.
 // If these changes require server-side code modification, backend developers can use generated code to adjust domain models.
 function setupCreatorForProductManager(creator) {
-    // Register a component that displays server-side code generated based upon the form JSON schema
-    ko.components.register(SERVER_CODE_TAB_COMPONENT_NAME, {
-        viewModel: {
-            createViewModel: (params) => {
-                const creator = params.creator;
-                var model = {
-                    generatedCode: generateDomainModelsCode(creator.survey)
-                };
-                return model;
-            }
-        },
-        template: `
-            <textarea data-bind="value:generatedCode" style="width:100%;height:100%;padding:'5px'">
-            </textarea>
-        `
-    });
+    class DomainCodeGeneratorTabComponent extends SurveyUI.Component {
+        render() {
+            const textAreaStyle = { width: "100%", heigth: "100%", padding: "5px" };
+            const generatedCode = generateDomainModelsCode(this.props.creator.survey)
+            return React.createElement("textarea", { style: textAreaStyle, value: generatedCode });
+        }
+    }
+    window.React = { createElement: SurveyUI.createElement };
+    SurveyUI.ReactElementFactory.Instance.registerElement(
+        SERVER_CODE_TAB_COMPONENT_NAME,
+        (props) => {
+            return React.createElement(DomainCodeGeneratorTabComponent, props);
+        }
+    );
     creator.onPropertyValidationCustomError.add((_, options) => {
         if (options.propertyName !== "name") return;
         // Validate the `name` property for the survey, questions, and matrix columns