Move index.js to web_src and use webpack to pack them (#8598)

* Move index.js to web_src and use webpack

* Fix initHeatMap

* update eslint and move webpack to devDependencies

* update index.js

* add eslint env node

.eslintrc

@@ -10,6 +10,7 @@ env:
   browser: true
   jquery: true
   es6: true
+  node: true
 
 globals:
   Clipboard: false

Makefile

@@ -434,7 +434,8 @@ npm-update: npm-check
 
 .PHONY: js
 js: npm
-	npx eslint public/js
+	npx eslint web_src/js webpack.config.js
+	npx webpack
 
 .PHONY: css
 css: npm

package.json

@@ -12,7 +12,9 @@
     "postcss-cli": "6.1.3",
     "stylelint": "10.1.0",
     "stylelint-config-standard": "18.3.0",
-    "updates": "8.5.3"
+    "updates": "8.5.3",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.10"
   },
   "browserslist": [
     "> 1%",

templates/base/footer.tmpl

@@ -129,7 +129,7 @@
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
 	<script type="text/javascript">
-		initHeatmap('user-heatmap', '{{.HeatmapUser}}');
+		window.initHeatmap('user-heatmap', '{{.HeatmapUser}}');
 	</script>
 {{end}}
 {{template "custom/footer" .}}

templates/repo/diff/comment_form.tmpl

@@ -39,7 +39,7 @@
 					{{end}}
 				{{end}}
 				{{if or (not $.HasComments) $.hidden}}
-					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
+					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="window.cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
 				{{end}}
 			</div>
 		</div>

templates/repo/issue/view_content/sidebar.tmpl

@@ -155,8 +155,8 @@
 						</form>
 						{{if  $.IsStopwatchRunning}}
 							<div class="ui buttons fluid stop-cancel">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
-								<button onclick="this.disabled=true;cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
+								<button onclick="this.disabled=true;window.cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
 							</div>
 						{{else}}
 							{{if .HasUserStopwatch}}
@@ -165,8 +165,8 @@
 								</div>
 							{{end}}
 							<div class="ui buttons two fluid start-add">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-								<button onclick="timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
+								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@@ -225,7 +225,7 @@
 					{{end}}
 					{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 						<br/>
-						<a style="cursor:pointer;" onclick="toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
+						<a style="cursor:pointer;" onclick="window.toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
 						<a style="cursor:pointer;" onclick="updateDeadline('');"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
 					{{end}}
 				</p>
@@ -235,7 +235,7 @@
 
 			{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
-					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="setDeadline();return false;">
+					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="window.setDeadline();return false;">
 						{{$.CsrfTokenHtml}}
 						<input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
 						<button class="ui green icon button">
@@ -280,7 +280,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blocking');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>
@@ -307,7 +307,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>

templates/user/auth/signin_inner.tmpl

@@ -65,7 +65,7 @@
 										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
 										class="{{$provider.Name}}"
 										src="{{AppSubUrl}}{{$provider.Image}}"
-										onclick="onOAuthLoginClick()"
+										onclick="window.onOAuthLoginClick()"
 									></a>
 							{{end}}
 						</div>

webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    index: './web_src/js/index.js',
+  },
+  devtool: 'source-map',
+  output: {
+    path: path.resolve(__dirname, 'public/js'),
+    filename: "[name].js"
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ 
+        sourceMap: true
+     })],
+  },
+};