:sparkles: update to vue 3 | still lots of issues here

configs/wp-config.php

 /** Sets up WordPress vars and included files. */
 require_once(ABSPATH . 'wp-settings.php');
 
-/** DEV */
 define('IS_DEV', getenv('IS_DEV'));
+
+/** DEV */
 if(defined('IS_DEV') && IS_DEV ) {
         $_SERVER['HTTPS'] = 'off';
 } else {

docker-compose.yml

 version: '3' 
 
 services:
-    vue-wp:
+    craft-wp:
         depends_on:
-            - vue-db
+            - craft-db
         image: wordpress
-        container_name: "vue-wp"
+        container_name: "craft-wp"
         volumes:
             - ./configs/wp-config.php:/usr/src/wordpress/wp-config-sample.php
             - ./uploads:/var/www/html/wp-content/uploads
         ports:
             - "8080:80"
         links:
-            - vue-db:mysql
+            - craft-db:mysql
         environment:
             WORDPRESS_DB_PASSWORD: "${DB_PASSWORD}"
             IS_DEV: "${IS_DEV}"
             WORDPRESS_DB_NAME: current_db
 
-    vue-db:
+    craft-db:
         image: mariadb
-        container_name: "vue-db"
+        container_name: "craft-db"
         environment:
             MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
             INNODB_FLUSH_METHOD: O_DSYNC
         volumes:
             - db:/var/lib/mysql
 
-    vue-phpmyadmin:
-        image: phpmyadmin/phpmyadmin
-        container_name: "vue-phpmyadmin"
-        depends_on:
-            - vue-db
-        ports:
-            - 8181:80
-        environment:
-            PMA_HOST: vue-db
-            MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
+    # craft-phpmyadmin:
+    #     image: phpmyadmin/phpmyadmin
+    #     container_name: "vue-phpmyadmin"
+    #     depends_on:
+    #         - craft-db
+    #     ports:
+    #         - 8181:80
+    #     environment:
+    #         PMA_HOST: craft-db
+    #         MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
 
 volumes:
-    db:
+    db:

plugins/posts-to-posts/.idea/copyright/profiles_settings.xml

+<component name="CopyrightManager">
+  <settings default="" />
+</component>

plugins/posts-to-posts/.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PhpUnit">
+    <phpunit_settings>
+      <PhpUnitSettings />
+    </phpunit_settings>
+  </component>
+  <component name="ProjectInspectionProfilesVisibleTreeState">
+    <entry key="Project Default">
+      <profile-state>
+        <expanded-state>
+          <State>
+            <id />
+          </State>
+        </expanded-state>
+        <selected-state>
+          <State>
+            <id>Blade files</id>
+          </State>
+        </selected-state>
+      </profile-state>
+    </entry>
+  </component>
+  <component name="ProjectLevelVcsManager" settingsEditedManually="false">
+    <OptionsSetting value="true" id="Add" />
+    <OptionsSetting value="true" id="Remove" />
+    <OptionsSetting value="true" id="Checkout" />
+    <OptionsSetting value="true" id="Update" />
+    <OptionsSetting value="true" id="Status" />
+    <OptionsSetting value="true" id="Edit" />
+    <ConfirmationsSetting value="0" id="Add" />
+    <ConfirmationsSetting value="0" id="Remove" />
+  </component>
+</project>

plugins/posts-to-posts/.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/posts-to-posts.iml" filepath="$PROJECT_DIR$/.idea/posts-to-posts.iml" />
+    </modules>
+  </component>
+</project>

plugins/posts-to-posts/.idea/posts-to-posts.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="module-library">
+      <library name="PHP">
+        <CLASSES>
+          <root url="file://$MODULE_DIR$/../../../wp-admin" />
+          <root url="file://$MODULE_DIR$/../../../wp-includes" />
+        </CLASSES>
+        <SOURCES>
+          <root url="file://$MODULE_DIR$/../../../wp-admin" />
+          <root url="file://$MODULE_DIR$/../../../wp-includes" />
+        </SOURCES>
+      </library>
+    </orderEntry>
+  </component>
+</module>

plugins/posts-to-posts/.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

plugins/posts-to-posts/admin/box-factory.php

 
 		$box = $this->create_box( $directed );
 
-		$method = 'ajax_' . $_REQUEST['subaction'];
+		$method = 'ajax_' . esc_attr( $_REQUEST['subaction'] );
 
 		$box->$method();
 	}

plugins/posts-to-posts/composer.json

     "minimum-stability": "dev",
     "require": {
         "composer/installers": "~1.0",
-        "scribu/lib-posts-to-posts": "dev-master",
-        "mustache/mustache": "~2.6"
     },
     "repositories": [
         {

plugins/posts-to-posts/posts-to-posts.php

 /*
 Plugin Name: Posts 2 Posts
 Description: Create many-to-many relationships between all types of posts.
-Version: 1.6.5
+Version: 1.6.6
 Author: scribu
 Author URI: http://scribu.net/
 Plugin URI: http://scribu.net/wordpress/posts-to-posts
 Domain Path: /lang
 */
 
-define( 'P2P_PLUGIN_VERSION', '1.6.5' );
+define( 'P2P_PLUGIN_VERSION', '1.6.6' );
 
 define( 'P2P_TEXTDOMAIN', 'posts-to-posts' );
 

plugins/posts-to-posts/readme.txt

 === Posts 2 Posts ===
 
-Contributors: scribu, ciobi  
+Contributors: scribu, ciobi, ayecode, stiofansisland
 Tags: connections, custom post types, relationships, many-to-many, users  
 Requires at least: 3.9  
-Tested up to: 4.3  
-Stable tag: 1.6.5  
+Requires PHP: 5.6
+Tested up to: 5.4
+Stable tag: 1.6.6
+
 License: GPLv2 or later  
 License URI: http://www.gnu.org/licenses/gpl-2.0.html  
 
 
 = Support & Maintenance =
 
-I, scribu, will not be offering support (either free or paid) for this plugin anymore.
+AyeCode Ltd have committed to security and maintenance updates due to this plugins requirement in our [List Manager Extension.](https://wpgeodirectory.com/downloads/list-manager/)
+
+~~I, scribu, will not be offering support (either free or paid) for this plugin anymore.~~
 
 If you want to help maintain the plugin, fork it [on github](https://github.com/scribu/wp-posts-to-posts) and open pull requests.
 
 
 == Changelog ==
 
+= 1.6.6 =
+* AyeCode Ltd have committed to security and maintenance updates - INFO
+* Deprecated PHP notices showing with latest WordPress - FIXED
+
 = 1.6.5 =
 * fixed error when Mustache is already loaded. props ApatheticG
 * fixed WP_User_Query warning. props PatelUtkarsh

plugins/posts-to-posts/vendor/scribu/scb-framework/AdminPage.php

 		}
 
 		add_action( 'admin_menu', array( $this, 'page_init' ), $this->args['admin_action_priority'] );
-		add_filter( 'contextual_help', array( $this, '_contextual_help' ), 10, 2 );
 
 		if ( $file ) {
 			$this->file = $file;
 	 */
 	protected function page_header() {
 		echo "<div class='wrap'>\n";
-		screen_icon( $this->args['screen_icon'] );
 		echo html( 'h2', $this->args['page_title'] );
 	}
 
 	 * @param string|object $screen
 	 *
 	 * @return string
+	 * @deprecated 1.6.6 Not used
 	 */
 	public function _contextual_help( $help, $screen ) {
 		if ( is_object( $screen ) ) {

vue-theme/functions.php

 
 	wp_enqueue_style( 'style', get_stylesheet_uri() );
 
-	if ( defined( 'IS_DEV' ) && IS_DEV ) {
+	if ( defined( 'IS_DEV' ) && IS_DEV === 'true') {
 		wp_register_script(
             'vue-theme',
             'http://localhost:8081/build/main.js',
 	} else {
         wp_register_script(
             'vue-theme',
-            get_template_directory_uri() . '/public/main.js',
+            get_template_directory_uri() . '/build/main.js',
             array( 'jquery' ),
             false,
             true 

vue-theme/package.json

   "description": "Wordpress SPA theme base",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server --open"
+    "dev": "webpack-dev-server --hot"
   },
   "keywords": [
     "wordpress",
   "author": "TOJ",
   "license": "UNLICENSED",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.9.0",
+    "@vue/compiler-sfc": "^3.0.2",
     "axios": "^0.19.2",
     "babel-loader": "^8.1.0",
-    "css-loader": "^3.4.2",
-    "file-loader": "^6.0.0",
-    "postcss-calc": "^7.0.2",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.1.1",
+    "postcss-calc": "^7.0.5",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "precss": "^4.0.0",
     "pug": "^2.0.4",
     "pug-plain-loader": "^1.0.0",
+    "style-loader": "^2.0.0",
     "sugarss": "^2.0.0",
     "url-loader": "^4.0.0",
     "vue-hot-reload-api": "^2.3.4",
-    "vue-loader": "^15.9.1",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
+    "vue-loader": "^16.0.0-beta.8",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "compression-webpack-plugin": "^3.1.0",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.6",
-    "vuex": "^3.1.3"
+    "vue": "^3.0.2",
+    "vue-router": "^4.0.0-rc.1",
+    "vuex": "^4.0.0-beta.4"
   },
   "babel": {
     "presets": [

vue-theme/postcss.config.js

+module.exports = {
+    parser: 'sugarss',
+    plugins: [
+        require('postcss-import'),
+        require('postcss-calc'),
+        require('precss'),
+        require('autoprefixer')
+    ]
+}

vue-theme/src/app.vue

 <template lang="pug">
-div#theme.f-col
+#theme.f-col
     cia-nav
     cia-hero
     main.f-col

vue-theme/src/components/gallery.vue

 <template lang="pug">
-.gallery.f-col.center(v-if="fullscreengallery + 1 > 0")
+.gallery.f-col.center(v-if="showGallery")
     button(@click="hideGallery").hide hide
     ul
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
             .image-wrapper.f-col.center
                 img(:src="image")
     .controls.f-row
-        button(@click="prev") <
+        button(@click="prev") left
         .f-grow
-        button(@click="next") >
+        button(@click="next") right
 </template>
 
 <script>
             selected: -1
         }
     },
+    computed: {
+        showGallery() {
+            return this.fullscreengallery + 1 > 0
+        }
+    },
     methods: {
         prev() {
             this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
     },
     watch: {
         fullscreengallery(newVal, oldVal) {
-
             this.selected = newVal
         }
     },
 <style lang="postcss">
 .gallery
     position: fixed
-    top: 0q
+    top: 0
     left: 0
     width: 100%
     height: 100%

vue-theme/src/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
-import App from '@/app.vue'
-
+import { createApp } from 'vue'
+import router from '@/router'
 import store from '@/store'
 
-import IndexPage from '@/pages/index.vue'
+import App from '@/app.vue'
 
-const router = new VueRouter({
-    mode: 'history',
-    routes: [
-        // Home Page
-        { path: '/', component: IndexPage },
-        // List Pages
-        { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: false } },
-        { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
-        // Sorted List Pages 
-        { path: '/:type/by-alpha', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-alpha' } },
-        { path: '/:type/recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'recent' } },
-        { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-material' } },
-        { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-episode' } },
-        { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-artist' } },
-        // Single Pages
-        { path: '/:type/:slug', component: () => import(/* webpackChunkName: "pages-single" */ './pages/single.vue'), props: { sidebar: true } },
-    ]
-})
+const craft = createApp(App)
 
-new Vue({ store, router, render: h => h(App) }).$mount('#wp-app')
+craft.use(router)
+    .use(store)
+    .mount('#wp-app')

vue-theme/src/pages/index.vue

             section(v-if="allEpisodesLoaded").shadow
                 router-link(:to="`./episodes`")
                     h4.t-cap episodes
-                router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
+                router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
                     p {{ Object.values(allEpisodes)[0].title }}
             section(v-if="allArtistsLoaded").shadow
                 router-link(:to="`./artists`")
                     h4.t-cap artists
-                router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
+                router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
                     p {{ Object.values(allArtists)[0].title }}
             section(v-if="allPagesLoaded").shadow
                 h4.t-cap pages
-                router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
+                router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")
                     p {{ Object.values(allPages)[0].title }}
         .f-row
             section(v-if="allPostsLoaded").shadow
                 router-link(:to="`./posts`")
                     h4.t-cap posts
-                router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")
+                router-link(:to="{ path: `/posts/${Object.values(allPosts)[0].slug}` }")
                     p {{ Object.values(allPosts)[0].title }}
         .f-row
             section

vue-theme/src/pages/list.vue

         },
         posts() {
             let type = this.convertTitleCase(this.type)
-
+            console.log('type: ', type)
             // We're override the API to sort by date
             // because items are returned by ID
             let unsortedOfType = Object.values(this[`all${type}`])

vue-theme/src/pages/single.vue

 <template lang="pug">
-.page--single.f-row.between(v-if="$route.params.slug")
+.page--single.f-row.between(v-if="allPostsLoaded && allPagesLoaded && allArtistsLoaded && allEpisodesLoaded")
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
     article.f-grow.shadow
         header
     },
     methods: {
         pageBlocks(posts) {
+            console.log('block for: ', this.posts)
+            console.log(this.$route.params.slug)
             return posts[this.$route.params.slug].blocks.map(block => {
                 if(block) return block
             })
         },
         checkForImages(posts) {
+            if(Object.keys(posts).length === 0) return
+            console.log(posts)
             this.pageBlocks(posts).forEach(block => {
                 if(!block) return
+
                 const doc = new DOMParser().parseFromString(block, 'text/html')
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
+                
                 // add captions
                 if(gallery.length) {
                     this.images = [].slice.call(gallery).map(

vue-theme/src/router/index.js

+import { createRouter, createWebHistory } from 'vue-router'
+import routes from './routes'
+
+const router = createRouter({
+    history: createWebHistory('/'),
+    routes
+})
+
+export default router

vue-theme/src/router/routes.js

+import indexPage from '@/pages/index.vue'
+
+export default [
+    // Home Page
+    { path: '/', component: indexPage },
+    // List Pages
+    { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: false } },
+    { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true } },
+    // Sorted List Pages 
+    { path: '/:type/by-alpha', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true, sortBy: 'by-alpha' } },
+    { path: '/:type/recent', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true, sortBy: 'recent' } },
+    { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true, sortBy: 'by-material' } },
+    { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true, sortBy: 'by-episode' } },
+    { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ '@/pages/list.vue'), props: { sidebar: true, sortBy: 'by-artist' } },
+    // Single Pages
+    { path: '/:type/:slug', component: () => import(/* webpackChunkName: "pages-single" */ '@/pages/single.vue'), props: { sidebar: true } },
+]

vue-theme/src/sss/_helpers.sss

-// Custom selectors
+/* Custom selectors */
 @custom-selector :--headings h1, h2, h3, h4, h5, h6
 
 @custom-media --viewport-medium (width <= 50rem)

vue-theme/src/sss/_reset.sss

-// Kill margins and paddings; add border-box
+/* Kill margins and paddings; add border-box */
 *
     margin: 0
     padding: 0
     tab-size: 4
     box-sizing: border-box
     
-// Always set color/background/font-size on root
+/* Always set color/background/font-size on root */
 body
     margin: 0
     color: #000
     font-size: 16px
     font-family: Helvetica, Arial, sans-serif
 
-// Remove list-style in navigation tags
+/* Remove list-style in navigation tags */
 nav
     ol, ul
         list-style: none
 
-// Reset some other default styles
+/* Reset some other default styles */
 button, input, select, textarea
     font-family: inherit
     font-size: inherit

vue-theme/src/sss/variables.sss

-// Colors
+/* Colors */
 $blue: #0076A3
 $chart-bg: rgba(20,20,20)
 $background: #444
 $primary-lighter: #CEFFF3
 $primary-dark: #007351
 
-// Fonts
+/* Fonts */
 $sans: 'sans-serif'
 $serif: 'serif'
 $mono: 'monospace'
 
-// Proportion (to be replaced with modular scale)
+/* Proportion (to be replaced with modular scale) */
 $ms: 1vw
 $base: 1em
 
 $max-width: 70em
 
-// Circles for add page
+/* Circles for add page */
 $radius: 2.5vw
 $path: 4px
 

vue-theme/src/store/index.js

 // SHAMELESS THEFT: https://github.com/EvanAgee/vuejs-wordpress-theme-starter
-import Vue from 'vue'
+
 import Vuex from 'vuex'
 
 import * as actions from './actions'
 import artist from './modules/artist'
 import episode from './modules/episode'
 
-Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
-Vue.config.devtools = true 
+// Vue.config.devtools = true 
 
 // Current page state
 const state = {
   },
   view: 'list'
 }
+
 const mutations = {
   SET_HERO(state, hero) {
     if (hero.url) {
   },
 }
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   actions,
   getters,
   mutations,
       episode
   },
   strict: debug,
-})
+})
+
+export default store

vue-theme/webpack.config.js

         resolve: {
         alias: {
                 '@': path.resolve(__dirname, 'src'),
-                'vue$': 'vue/dist/vue.esm.js'
             },
             extensions: ['*', '.js', '.sss', '.vue', '.json']
         },
                 },
                 {
                     test: /\.(css|sss|postcss)$/,
-                    use: [{
-                            loader: 'vue-style-loader'
-                        },
-                        {
-                            loader: 'postcss-loader',
-                            options: {
-                                parser: 'sugarss',
-                                plugins: () => {
-                                    return PostCssPlugins
-                                }
-                            }
-                        }
+                    use: [
+                        'style-loader',
+                        'css-loader',
+                        'postcss-loader',
                     ]
                 }
             ]
             noInfo: false,
             historyApiFallback: true,
             hot: true,
-            open: true,
+            open: false,
             hotOnly: true,
             disableHostCheck: true,
             writeToDisk: true,