revert: add back in app.vue in /package/bootstrap*

VividLemon · VividLemon · commit 9e80d24dc214 · 2022-07-27T13:23:20.000-05:00
The playground environment is great for simulating a user environment, however, as I have stated, it doesn't really work that well for developing components since playground only uses ./dist of the main package. It would need to be rebuilt constantly in order to see a good affect. There could be a workaround that I don't know about. Read the TODO in app.vue and make a discussion (or post on PR) if you think app.vue development area should be reverted or expanded like it was pre-pnpm/workspace commit
diff --git a/apps/playground/src/App.vue b/apps/playground/src/App.vue
@@ -4,7 +4,10 @@
   </b-container>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// This is a playground to simulate the environment of a user. Not for developing components
+// (Since it uses /dist, it will not cause a rerender here, and main package must be built to see changes)
+</script>
 
 <style>
 details.accordion-item summary {
diff --git a/packages/bootstrap-vue-3/index.html b/packages/bootstrap-vue-3/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>bootstrap-vue</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>
+        We're sorry but this doesn't work properly without JavaScript enabled. Please enable it to
+        continue.
+      </strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/bootstrap-vue-3/public/favicon.ico b/packages/bootstrap-vue-3/public/favicon.ico
diff --git a/packages/bootstrap-vue-3/src/App.vue b/packages/bootstrap-vue-3/src/App.vue
@@ -0,0 +1,14 @@
+<template>
+  <b-container>
+    <b-row>
+      <b-col> Hello world </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script setup lang="ts">
+// Implement things here
+// TODO perhaps this should be more expanded like ./apps/playground
+// Or it could be barebones for one a single component development cycle is required
+// Create a discussion with your thoughts if you think it should be changed
+</script>
diff --git a/packages/bootstrap-vue-3/src/main.ts b/packages/bootstrap-vue-3/src/main.ts
@@ -0,0 +1,48 @@
+import {createApp, h} from 'vue'
+import App from './App.vue'
+import BootstrapVue, {BToastPlugin} from './BootstrapVue'
+
+import {createRouter, createWebHistory} from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: {
+        name: 'Home',
+        render() {
+          return h('h1', {}, 'Home page')
+        },
+      },
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: {
+        name: 'Test',
+        render() {
+          return h('h1', {}, 'test page')
+        },
+      },
+    },
+    {
+      path: '/about/:id',
+      name: 'About',
+      component: {
+        name: 'About',
+        props: {id: [Number, String]},
+        render() {
+          return h('h1', {}, `About page ${this.props.id}`)
+        },
+      },
+      props: true,
+    },
+  ],
+})
+
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './styles/styles.scss'
+
+createApp(App).use(BootstrapVue).use(BToastPlugin).use(router).mount('#app')
